asked on

How image map IDs are made available to JavaScript variables.

Hello,
I am under the impression, (strong delusion maybe) that when I hover over the image map below, that the ID of any particular AREA that I hover over should be made available somehow to the JavaScript below. But that is not happening. Only if I hover over the first AREA, the one with id=ImageMap, does the corrosponding ID get passed. If I hover over the second AREA, with id=ChangeMap, I continue to get the id of the first AREA.

I feel quite positive that I am getting only the first id, even if I click on the second AREA. I have tried to implement some code to pop up a dialog box showing me the actual variable value, but I can't get that code to work. But it seems conclusive to me by what is happening on the page when I hover, that I am getting the id of the first AREA, when hovering over the second AREA. Can you please shead some light on this for me?

Thank you,
Riverwalk

<div id="map-view-container">		
<div id="map-container">			
<img src="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" name="default_image" width="428" height="387" alt="click map" border="0" />
<map>
	<area id='ImageMap' shape="rect" alt="Roadmap Prioritization" title="Roadmap Prioritization" coords="300,65,400,128" onMouseOver="document.default_image.src ='xxxxxxxxxxxxxxxxxxx.png'" />
	<area id='ChangeMap' shape="rect" coords="331,209,431,272" alt="Change" title="Change" onMouseOver="document.default_image.src ='xxxxxxxxxxxxxx.png'"    /> 
	<area shape="rect" coords="239,324,339,387"  alt="Automate" title="Automate" onMouseOver="document.default_image.src ='xxxxxxxxxxxxx.png'"    />
	<area shape="rect" coords="91,325,191,388"  alt="Sustain" title="Sustain" onMouseOver="document.default_image.src =xxxxxxxx.png'"   />
	<area shape="rect" coords="0,208,99,271"  alt="Execute" title="Execute" onMouseOver="document.default_image.src =xxxxxxxx.png'"    />
	<area shape="rect" coords="32,66,131,129"  alt="Customer" title="Customer" onMouseOver="document.default_image.src ='xxxxxx.png'"    />
	<area shape="rect" coords="169,2,268,65"  alt="Business" title="Business" onMouseOver="document.default_image.src =xxxxxxx.png'"   />
</map>
</div>
</div>

<script type="text/javascript">
	
		jQuery(document).ready(function() {
			
			jQuery("#map-container AREA").mouseover(function(){
				var regionList = '.'+$(this).attr('id')+'-list';
				});	
	</script>

Open in new window

Kim Walker

The image doesn't have a usemap attribute and the map doesn't have a name. How are you applying the map to the image?

James Foxworthy

ASKER

Thank you. I use to have those items, but I have messed it up by cutting and pasting. I have them back now. Can you tell me if I have those items in place, should the AREA IDs be available to the JavaScript, i.e. each one, depending on which one is hovered over? That's what I need to be sure of, that what I am expecting to happen, is indeed the way that it should work.

Thank you,
Riverwalk

James Foxworthy

ASKER

Let me just ask you this.... Considering the below code. What systax would I use to do an if statement on one of the variables? For example I want to say, "If regionLis = "ChangeMap-list" Then" ?

My problem is, I need to know which Map Area has been hovered on... Unfortunately for me, I am stuck on this task and I don't know JavaScript or JQuery worth a darn.

Thanks,
Riverwalk

jQuery("#map-container AREA").mouseover(function(){
				var regionMap = '.'+$(this).attr('id')+'-map';
				var regionList = '.'+$(this).attr('id')+'-list';
				var regionList2 = '.'+$(this).attr('id')+'-list2';
				var regionList3 = '.'+$(this).attr('id')+'-list';
				jQuery(regionMap).css('display', 'inline');
 
				// Check if a click event has occured and only change the Region hover state accodringly
				if (! jQuery('#practice-container ul').hasClass('selected')) {
					jQuery(regionList).css('display', 'inline');
					jQuery(regionList2).css('display', 'none');
				
				}

Open in new window

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

James Foxworthy

ASKER

Thanks. It is an aspx page. I will try the alert(this.id), thank you!

James Foxworthy

ASKER

Thank you!