jQuery: Problems with Hover and Image Map
In the example below, a flower is displayed when you hover over the red bar.
The problem is that if you hover over the flower, the image slides up so you can no longer see the flower.
I only want the image to slide up if you stop hovering over the red bar or flower.
The problem is that if you hover over the flower, the image slides up so you can no longer see the flower.
I only want the image to slide up if you stop hovering over the red bar or flower.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#selection p a').hover(function() {
$('#selection, #selection p').animate({
height: '200px'
}, 500);
});
$('#selection p').hover(function() {}, function(e) {
$('#selection, #selection p').animate({
height: '50px'
}, 200);
});
});
</script>
<style type="text/css">
#selection {
height: 50px;
overflow: hidden;
position: relative;
padding: 0;
magin: 0;
}
#selection p {
height: 50px;
overflow: hidden;
position: relative;
padding: 0;
magin: 0;
}
#selection p a {
display: block;
border: 2px solid green;
position: absolute;
left: 5px;
top: 5px;
height: 20px;
width: 240px;
background: red;
padding: 0;
magin: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="selection">
<p>
<a></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Lithospermum_arvense_W.jpg/250px-Lithospermum_arvense_W.jpg" usemap="#xyz" alt=""/>
</p>
</div>
<map name="xyz" id="xyz">
<area shape="rect" coords="0,51,250,100" href="a.htm" alt="a" />
<area shape="rect" coords="101,51,250,200" href="a.htm" alt="b" />
</map>
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.