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

RiverWalkAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kim WalkerWeb Programmer/TechnicianCommented:
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?
RiverWalkAuthor Commented:
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
RiverWalkAuthor Commented:
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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kim WalkerWeb Programmer/TechnicianCommented:
I think that's a reasonable assumption. I'm not familiar with jQuery, so I can't help there. Also, what doctype are you using? X-HTML requires the attributes to be all lower case ("onmouseover" instead of "onMouseOver").

I briefly tested it using onmouseover="javascript: alert(this.id);" and it worked for me.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RiverWalkAuthor Commented:
Thanks. It is an aspx page.  I will try the alert(this.id), thank you!
RiverWalkAuthor Commented:
Thank you!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.