Link to home
Start Free TrialLog in
Avatar of Refael
RefaelFlag for United States of America

asked on

jquery function

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!
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

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

ASKER CERTIFIED SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Refael

ASKER

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

ASKER

simply an expert!