How to make jquery stop running action on hover off?

Question

My jquery runs the action I want on hover of co-ordinates of my imagemap, but when I hover off the co-orientates of my image map the action stays. If I hover over other co-ords it still displays the action from the first hover over. I want to be able to hover off the first co-ord and the image will return to its default state, and then If I hover over another co-ord it will run that action. When I hover off that it will also return to default image.

Heres my code :) :

<div id="image">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="computer.jpg" usemap="#parts">
<map name="parts">
<area shape="poly" coords="1,131,102,80,124,108,108,143,-1,198,2,132" id="harddrive" href="#">
<area shape="poly" coords="0,199,106,144,117,128,101,171,1,220,1,200" id="cd" href="#">
<area shape="poly" coords="167,136,244,95,263,102,298,162,211,205,166,136" id="fan" href="#">
<area shape="poly" coords="110,63,192,19,197,1,225,2,260,62,241,93,157,139" id="powerblock"   href="#">
<area shape="poly" coords="132,287,240,238,263,273,155,319,131,286" id="graphicscard" href="#">
<area shape="poly" coords="160,318,219,294,213,319,229,334,217,369,170,388,147,367,159,318"       id="heatsink" href="#">
<area shape="poly" coords="172,389,259,353,273,384,207,413,192,413" id="motherboard" href="#">
</map>

<script type="text/javascript">

$('#harddrive').hover(function() {
$('#image').html('<img src="computer-harddrive.jpg">');
}, function() {
$('#image').html('');
});

$('#cd').hover(function() {
$('#image').html('<img src="computer-cd.jpg">');
}, function() {
$('#image').html('');
});

$('#fan').hover(function() {
$('#image').html('<img src="computer-fan.jpg">');
}, function() {
$('#image').html('');
});

$('#powerblock').hover(function() {
$('#image').html('<img src="computer-power.jpg">');
}, function() {
$('#image').html('');
});

$('#graphicscard').hover(function() {
$('#image').html('<img src="computer-graphicscard.jpg">');
}, function() {
$('#image').html('');
});

$('#heatsink').hover(function() {
$('#image').html('<img src="computer-heatsink.jpg">');
}, function() {
$('#image').html('');
});

$('#motherboard').hover(function() {
$('#image').html('<img src="computer-motherboard.jpg">');
}, function() {
$('#image').html('');
});

</script>

my default image is computer.jpg

Hope you can help :)

Answer 1

what about use onmouseover and onmouseout? http://www.w3schools.com/jsref/event_onmouseover.asp