image map

[chrisjwebb1978]

Hi allI have created an image map using dreamweaver cs4, which incudes rectangles for the area users can select. Normally, an image map will limk to other pages but I would to happen is when an area is selected, text appears below that map with associated information. I have inserted the code below and included a link to the page which I hope illustrates the idea i have.

[html]<div id="content">    	<div class="padding">    		<h2>Unit Information</h2>    		<hr />  	  	<p>Please on a highlighted area to display the clubs listed in that area.</p>                <img src="images/image_map/banes-image-map.jpg" alt="B&NES Image Map" width="565" height="342" border="0" usemap="#Map" />                        <map name="Map" id="Map">                        <area shape="rect" coords="38,119,92,157" href="#" alt="Odd Down" target="_blank" />                        <area shape="rect" coords="103,115,154,151" href="#" alt="Combe Down" target="_blank" />                        <area shape="rect" coords="184,59,247,92" href="#" alt="Claverton Down" target="_blank" />                        <area shape="rect" coords="234,213,298,239" href="#" alt="Freshford" target="_blank" />                        <area shape="rect" coords="288,297,351,326" href="#" alt="Norton St Phillip" target="_blank" />                        </map>                <h3>Group Information</h3>		<p>Text for the selected area should display here</p>        </div></div>[/html]

http://titan.citybathcoll.ac.uk/localuser/...nformation.htmlHope this is enough information...Thanks for any help

[ShadowMage]

Just put an onclick event handler on your <area /> tags that calls a JavaScript function to display the text.

[dink]

Depending on how much information you could use the title attribute in the a tag.dink

[chrisjwebb1978]

Just put an onclick event handler on your <area /> tags that calls a JavaScript function to display the text.

This sounds like a plan...Now I'm assuming (i've been told never to assume) that...

• the onClick syntax goes in each of the <area /> tags which
• somehow calls to a javascript function in either the head or an external .js.
• which then checks the passed argument from the onClick <area/> tag and fetches the associated text for that argument, which somehow
• displays the information in the <p> tag near the bottom of my code.

Does that sound remotely correct? and if so, is there a good tutorial for this feature as I am still at the building blocks of javascript.ALSO!!!, many thanks for your help so far

[ShadowMage]

(i've been told never to assume)

That's good advice. After all, you know what they say about assumption...

• the onClick syntax goes in each of the <area /> tags which
• somehow calls to a javascript function in either the head or an external .js.
• which then checks the passed argument from the onClick <area/> tag and fetches the associated text for that argument, which somehow
• displays the information in the <p> tag near the bottom of my code.

Does that sound remotely correct? and if so, is there a good tutorial for this feature as I am still at the building blocks of javascript.

You are indeed on the right track. How much text are you trying to display? One line? A few lines? A whole bunch of lines? Will the text be pulled from a database?If you only need to display a small amount of static text you can just do that right in the call to the function:<area shape="rect" coords="38,119,92,157" href="#" alt="Odd Down" target="_blank" onclick="showText('Text to show');" />If however, you need to get that information from a database you'll want to use AJAX. There's a decent tutorial right here on W3Schools:http://w3schools.com/ajax/ajax_intro.aspStart putting something together, and if you have questions come back and ask. We'll be more than happy to help!

[chrisjwebb1978]

You are indeed on the right track. How much text are you trying to display? One line? A few lines? A whole bunch of lines? Will the text be pulled from a database?

When clicking on a area of the map, there will be several sets of addresses for each, no more than quarter a page of A4.From this i expect i'll need an onClick that calls and passes data (say Odd Down) to a javascript function, that compares the data to a set of statements and display the content in the <p> tag of the correct statement. When another area is clicked, the text changes to the associated area. I'm just not sure how that would look or go. Here's what I imagine ...

• The onClick in the area tag calls to the function somehow (for odd down for arguments sake) when clicked
• The javascript function catches the data from the onClick and compares it to a set of statements (a statement for 'odd down')
• The content from the javascript function statement is passed to the <p> tag.

Each time another area is click, the content changes.Now...from my imagination (sometimes needing a jump start ) to actual code is the magic i don't possess.If that's an area you are happy to help with, then bloody fantastic . If not, then many thanks for replying anyhow

[ShadowMage]

So I'm guessing this information is going to be hardcoded (you write it by hand) and not retrieved from a database?You're definitely on the right track. I'll build off of what I told you before. So in my last post we created the onclick handler in your <area> tag. I'm going to change up the name of the function and the text that's passed to the function a little bit to better fit your situation. So we now have something like this:<area shape="rect" coords="38,119,92,157" href="#" alt="Odd Down" target="_blank" onclick="showAddresses('areaOne');" />So in the function you would do a test to see which set of addresses should be used. I would probably use a switch. You would also need a variable to hold the string that will be written to the innerHTML of the div. Here's the start of the function:

function showAddresses(txtMapArea) {   var strInfo = '';      switch (txtMapArea) {	  case 'areaOne':		 //do something		 break;	  //the rest of the case statements	  default:		 alert("Area not found");		 break;   }}

There are several ways to get the information you need to write.1 - Manually write each one inside the case statements: This will probably end up making your function very long and potentially hard to modify if you need to in the future as well as probably being the least efficient. However, this is probably the quickest and easiest to set up.2 - Write a separate function for each area which generates a string to return and print out: Easier to modify and more efficient than the first.3 - Create an object that will store string data for the addresses you need to print: This is probably the most efficient method, easy to modify, but probably a little more complex to set up.Which one do you want? I would recommend the 3rd option if you're up to it, but the 2nd option is probably the one you want to go with if you're not.

[chrisjwebb1978]

There are several ways to get the information you need to write.1 - Manually write each one inside the case statements: This will probably end up making your function very long and potentially hard to modify if you need to in the future as well as probably being the least efficient. However, this is probably the quickest and easiest to set up.2 - Write a separate function for each area which generates a string to return and print out: Easier to modify and more efficient than the first.3 - Create an object that will store string data for the addresses you need to print: This is probably the most efficient method, easy to modify, but probably a little more complex to set up.Which one do you want? I would recommend the 3rd option if you're up to it, but the 2nd option is probably the one you want to go with if you're not.

This is some quality support that I am truly grateful for. Due to time issues, I am likely to go wit option 1, although due to this website being free of charge and an ongoign project, I'm likely going to head down the 3rd option from a mechnical point of view.I'll let you know how I get on.

[chrisjwebb1978]

Depending on how much information you could use the title attribute in the a tag.dink

Many thanks for your reply, but it looks like jkloth has caught my imagination on this one.Cheers

[chrisjwebb1978]

1 - Manually write each one inside the case statements: This will probably end up making your function very long and potentially hard to modify if you need to in the future as well as probably being the least efficient. However, this is probably the quickest and easiest to set up.

I have added the function which you so kindly compiled for me. For test purposes i added 'document.write("hello world").When clicking on the map, a page is displayed with hello world (great). Obviously there is more complex method to inserting the text in the <p> tag than 'document.write' which i beleive you referred to when you mentioned needing a variable to hold the string that will be written to the innerHTML of the div.Does this mean I need to surround the <p> tag in a <div>, or can I use the <p> tag on it's own?How is this possible using option 1 above? This will also hopefully stop the page from redirecting as the following code doesn't stop that..

<area shape="rect" coords="38,119,92,157" href="#" alt="Odd Down" onclick="showAddresses('areaOne');return false;" />

Thanks

[ShadowMage]

I have added the function which you so kindly compiled for me. For test purposes i added 'document.write("hello world").When clicking on the map, a page is displayed with hello world (great). Obviously there is more complex method to inserting the text in the <p> tag than 'document.write' which i beleive you referred to when you mentioned needing a variable to hold the string that will be written to the innerHTML of the div.Does this mean I need to surround the <p> tag in a <div>, or can I use the <p> tag on it's own?How is this possible using option 1 above?

<p> tags also have an innerHTML property, so you could certainly use a <p> instead of a <div>. The only reason I mentioned a <div> is because that's what I use all the time. :)You just go through the function and under each case statement you would concatenate strings onto your variable. Then at the end of the function you would set the innerHTML of your <p> equal to the string variable you constructed.

This will also hopefully stop the page from redirecting as the following code doesn't stop that..

<area shape="rect" coords="38,119,92,157" href="#" alt="Odd Down" onclick="showAddresses('areaOne');return false;" />

It doesn't really redirect. It just rewrites the document because your using document.write. When you have the function complete you won't be using document.write so it isn't going to do anything except change the text of your <p> tag.

[chrisjwebb1978]

You just go through the function and under each case statement you would concatenate strings onto your variable. Then at the end of the function you would set the innerHTML of your <p> equal to the string variable you constructed.

I expect you're starting to get tired of this post now I understand the theory of what you have explained in the above quote from your last post but need an example of this as I don't know Javascript syntax.I do appreciate your going to an awful lot for me which is why i also understand if your not willing or able to show me an example of this, so don't feel you need to! Further to this...Any textbooks that you can recommend or sites so I can try and upgrade my limited Javascript knowledge

[ShadowMage]

I expect you're starting to get tired of this post now I understand the theory of what you have explained in the above quote from your last post but need an example of this as I don't know Javascript syntax.

That's not the case at all. I'm more than happy to help. I just try to avoid giving out too much code because then people don't learn. They copy and paste what I give them and if it works then they don't take the time to figure out why it works.Anyway this should get you started:

function showAddresses(txtMapArea) {   var strInfo = '';     switch (txtMapArea) {	  case 'areaOne':		 strInfo += "Address1";		 //Rest of information		 break;	  //the rest of the case statements	  default:		 alert("Area not found");		 break;   }   //Set the innerHTML   document.getElementById('p_addresses').innerHTML = strInfo;}

You can concatenate (add to) strings by using the += operator like I did above. This: strInfo += "Address1" is the same as this: strInfo = strInfo + "Address1"; You just need to make sure that you initialize the variable before you use += or you'll get an error.To set the innerHTML of your <p> you'll need to get a reference to your <p> tag. To do that you use the getElementById method, which means you'll need to give your <p> an id: <p id='p_addresses'>...</p>

Further to this...Any textbooks that you can recommend or sites so I can try and upgrade my limited Javascript knowledge

Don't know of any books off hand, but the W3Schools has a pretty good JavaScript tutorial. You should be able to get a good start from there.

[chrisjwebb1978]

I have included this code in the website and it is working a dream. One thing I have noticed is new lines of text aren't going down on separate lines.

 switch (txtMapArea) {	  case 'areaOne':		 strInfo += "Odd Down";	 strInfo += "1st South Bath Rainbows - Tuesday evening from 5.00pm-6.00pm - Meet at United";	 strInfo += "Reformed Church, Frome Road, Odd Down, Bath.  Leader: Allison Dagger";	 //Rest of information		 break;	  //the rest of the case statements

How do i include a line break in the function to display it correctly?

[ShadowMage]

How do i include a line break in the function to display it correctly?

Just insert a plain old HTML <br /> tag where you need it to start a new line.strInfo += "This is one line.<br />This is a new line";edit: If it's important for your source code to be readable you can also use the newline escape character: \nstrInfo += "This is one line.<br />\nThis is a new line";The \n won't print to the screen. It will create a line break in your source code.

[chrisjwebb1978]

...and finally...This now works a treat! Thank you for the time you spent helping me with this!I will be looking at more Javascript sources online and examples.

[ShadowMage]

...and finally...This now works a treat! Thank you for the time you spent helping me with this!I will be looking at more Javascript sources online and examples.

Glad to help :)And remember, if you have questions ask! We'll be here!