asked on

Change cursor on image map with jQuery hover

How can I change the cursor on an image map using the jQuery hover event?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js "></script> 
</head>
<body>
 
<div id="icons">
<p id="iconP"><img src="http://agateau.files.wordpress.com/2008/11/20081119-0-big-bar.png" alt="" usemap="#iconImg" /></p>
</div>
 
<map name="iconImg">
<area shape="rect" coords="4,3,40,33" href="technology_fullscreen" class="technology_fullscreen" title="Full Screen" />
<area shape="rect" coords="46,3,82,35" href="technology_play" class="technology_play" title="Play" />
<area shape="rect" coords="90,3,122,35" href="technology_rewind" class="technology_rewind" title="Rewind" />
<area shape="rect" coords="129,3,170,35" href="technology_fastforward" class="technology_fastforward" title="Fast Forward" />
</map>
 
<script type="text/javascript">
	function iconBg(x) {
	 var iconP = document.getElementById('iconP');
	 if (iconP) iconP.style.cursor='help';
	}
 
	function iconBgClear() {
	 var iconP = document.getElementById('iconP');
	 if (iconP) iconP.style.cursor='default';
 
	}
 
	$(document).ready(function(){
	   $(".technology_fullscreen").hover(function(){iconBg(0);}, function(){iconBgClear()});
	   $(".technology_play").hover(function(){iconBg(0);}, function(){iconBgClear()});
	   $(".technology_rewind").hover(function(){iconBg(55);}, function(){iconBgClear()});
	   $(".technology_fastforward").hover(function(){iconBg(117);}, function(){iconBgClear()});
 
	});
</script>
 
</body>
</html>

Open in new window

Roger Baklund

I could not figure out why your code does not work, but this works:

$(".technology_fullscreen").hover(function(){$(this).css('cursor','help');}, function(){iconBgClear()});

Open in new window

ASKER CERTIFIED SOLUTION

Roger Baklund

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial