Change cursor on image map with jQuery hover

hankknight
hankknight used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2008

Commented:
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

Top Expert 2008
Commented:
Ah. Now I see it.

        function iconBg(x) {
         var iconP = document.getElementById('iconP');
         if (iconP) iconP.style.cursor='help';
        }
 
You are setting the style for the paragraph iconP, not for the AREA element. Change the function like this:

        function iconBg(icon) {
          icon.style.cursor='help';
        }

...and call it like this:

           $(".technology_fullscreen").hover(function(){iconBg(this);}, function(){iconBgClear()});

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