jquery function

Refael
Refael used Ask the Experts™
on
Hello Experts,

I am trying to create a function in jquery.
The code below show you an map-area-shape ID and a DIV with an ID that correspond to the  map-area-shape.
Since i will have like 30 map-area-shape ID's and content corresponding ID's i need a function so that each time a user mouseenter the map-area it shows the corresponding content div.

<map name="Map" id="Map">
    <area shape="rect" id="we212" coords="170,11,275,51" />
</map>

<div id="we212_info">
  // content //
</div>

Open in new window



At the moment i have the below code which  i need to convert to a function.

$('#we212').mouseenter(function() {
		$('#we212_info').stop(true, true).fadeIn('slow');
		}).mouseleave(function() {
	    $('#we212_info').stop(true, true).hide();
	});

Open in new window


i will appreciate your help!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
Try this (hope I got the selectors right):

$('#Map>area').each(function(){
  $(this).mouseenter(function() {
    $("#"+$(this).attr("id")+"_info").stop(true, true).fadeIn("slow");
  }).mouseleave(function() {
    $("#"+$(this).attr("id")+"_info").stop(true, true).hide();
  });
});

Open in new window

Information Systems Manager
Top Expert 2012
Commented:
you can also use:

$("#Map>area").each(function(){
  $(this).hover(function() {
    $("#"+$(this).attr("id")+"_info").stop(true, true).fadeIn("slow");
  },function() {
    $("#"+$(this).attr("id")+"_info").stop(true, true).hide();
  });
});

Open in new window


There may be a space or two needed in the initial selector:

$("#Map > area")
Refael

Author

Commented:
Hi JonNorman, thank you, it works :-)
something to learn! than you.
Refael

Author

Commented:
simply an expert!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial