Solved

cant select IMAGE MAP AREA for jquery?!

Posted on 2010-09-20
2
2,849 Views
Last Modified: 2012-08-14
Hi there,

I try here since long time now to get my jquery tooltip working with a old school image map but i cant select somehow the correct area.

I tried several selectors like name,class, etc. but it just never works.

I just would like to get the jquery tooltip working with the correct area of a image map. can somebody tell me how to create the correct selector for this?

I posted a demo code with an example on how i tried. (which does not work)

If i use a[rel=tooltip] instead of area[rel=tooltip] it works perfect with all A HREF but i need in this case that it works with the AREA.

thank you in advance,
Oliver

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Simple JQuery Tooltips</title>



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">



$(document).ready(function() {



	//Select all anchor tag with rel set to tooltip

	$("area[rel=tooltip]").mouseover(function(e) {

		

		//Grab the title attribute's value and assign it to a variable

		var tip = $(this).attr('title');	

		

		//Remove the title attribute's to avoid the native tooltip from the browser

		$(this).attr('title','');

		

		//Append the tooltip template and its value

		$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');		

				

		//Show the tooltip with faceIn effect

		$('#tooltip').fadeIn('500');

		$('#tooltip').fadeTo('10',0.9);

		

	}).mousemove(function(e) {

	

		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse

		$('#tooltip').css('top', e.pageY + 10 );

		$('#tooltip').css('left', e.pageX + 20 );

		

	}).mouseout(function() {

	

		//Put back the title attribute's value

		$(this).attr('title',$('.tipBody').html());

	

		//Remove the appended tooltip template

		$(this).children('div#tooltip').remove();

		

	});



});



</script>



<style>

body {font-family:arial;font-size:12px;text-align:center;}

div#paragraph {width:300px;margin:0 auto;text-align:left}

a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}

a:hover {color:#000;text-decoration:none;}

.clear {clear:both}





/* Tooltip */



#tooltip {

	position:absolute;

	z-index:9999;

	color:#fff;

	font-size:10px;

	width:180px;

	

}



#tooltip .tipHeader {

	height:8px;

	background:url(images/tipHeader.gif) no-repeat;

}





#tooltip .tipBody {

	background-color:#000;

	padding:5px 5px 5px 15px;

}



#tooltip .tipFooter {

	height:8px;

	background:url(images/tipFooter.gif) no-repeat;

}



</style>



</head>



<body>

<img src="images/queness.gif" width="150" height="38" border="0" usemap="#Map" />

<map name="Map" id="Map">

  <area rel="tooltip" title="A paragraph typically consists of a unify" shape="rect" coords="7,6,34,26" href="#" />

</map>

</body>

</html>

Open in new window

0
Comment
Question by:Oliver2000
2 Comments
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
ID: 33723652
Try this.

The problem u got is quite simple. You wanted to create and append a tooltip element into an area element - that does not allow a DIV there. Simply moving div to document body and displaying / hiding on mouseover/out solves your problem. Cheers!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Simple JQuery Tooltips</title>



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">



$(document).ready(function() {



	//Append the tooltip template and its value to document.body!	

	$(document.body).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody" id="tipBody"></div><div class="tipFooter"></div></div>');

	$('#tooltip').fadeOut(0);

	

	//Select all anchor tag with rel set to tooltip

	$("area[rel=tooltip]").mouseover(function(e) {

		//Grab the title attribute's value and assign it to a variable

		var tip = $(this).attr('title');	

		

		//Remove the title attribute's to avoid the native tooltip from the browser

		$(this).attr('title','');

		

		$("#tipBody").html(tip);

		

		//Show the tooltip with faceIn effect

		$('#tooltip').fadeIn('500');

		$('#tooltip').fadeTo('10',0.9);

		

	}).mousemove(function(e) {

	

		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse

		$('#tooltip').css('top', e.pageY + 10 );

		$('#tooltip').css('left', e.pageX + 20 );

		

	}).mouseout(function() {

	

		//Put back the title attribute's value

		$(this).attr('title',$('.tipBody').html());

	

		//Remove the appended tooltip template

		//$(this).children('div#tooltip').remove();

		$('#tooltip').fadeOut('500');

		

	});



});



</script>



<style>

body {font-family:arial;font-size:12px;text-align:center;}

div#paragraph {width:300px;margin:0 auto;text-align:left}

a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}

a:hover {color:#000;text-decoration:none;}

.clear {clear:both}





/* Tooltip */



#tooltip {

	position:absolute;

	z-index:9999;

	color:#fff;

	font-size:10px;

	width:180px;

	

}



#tooltip .tipHeader {

	height:8px;

	background:url(images/tipHeader.gif) no-repeat;

}





#tooltip .tipBody {

	background-color:#000;

	padding:5px 5px 5px 15px;

}



#tooltip .tipFooter {

	height:8px;

	background:url(images/tipFooter.gif) no-repeat;

}



</style>



</head>



<body>

<img src="http://www.depressionfighters.com/images/150X38.gif" width="150" height="38" border="0" usemap="#Map" />

<map name="Map" id="Map">

  <area rel="tooltip" title="A paragraph typically consists of a unify" shape="rect" coords="7,6,34,26" href="#" />

</map>

</body>

</html>

Open in new window

0
 

Author Closing Comment

by:Oliver2000
ID: 33724655
Excellent! This did the job 100%. I even thought on something like this before but i was not be able to solve this alone. Thank you so much for your help, i was getting already crazy here.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

705 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

21 Experts available now in Live!

Get 1:1 Help Now