How image map IDs are made available to JavaScript variables.

Posted on 2011-10-04
Last Modified: 2012-05-12
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,
<div id="map-view-container">		
<div id="map-container">			
<img src="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" name="default_image" width="428" height="387" alt="click map" border="0" />
	<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'"   />

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

Open in new window

Question by:RiverWalk
    LVL 21

    Expert Comment

    by: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?

    Author Comment

    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,

    Author Comment

    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.


    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

    LVL 21

    Accepted Solution

    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(;" and it worked for me.

    Author Comment

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

    Author Closing Comment

    Thank you!

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    CFFILE upload help 98 87
    Help with a small Javascript 6 26
    CMAL Query - Jsom 1 14
    Swiper slider stops between pages 11 13
    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now