• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 356
  • Last Modified:

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

0
RiverWalk
Asked:
RiverWalk
  • 4
  • 2
1 Solution
 
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?
0
 
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
0
 
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

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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.
0
 
RiverWalkAuthor Commented:
Thanks. It is an aspx page.  I will try the alert(this.id), thank you!
0
 
RiverWalkAuthor Commented:
Thank you!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now