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.
<!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>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
 
danbaugherConnect With a Mentor Commented:
The problem is that you're using the hover event which is actually two different events mouseenter and mouseleave. Because the image is not a child of the anchor tag you actually mouseleave the red bar which causes the image to shrink back down. Instead of using hover bind to the mouseenter only for the red bar to grow the image and bind mouseleave to the wrapper div to shrink it back down.

<!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 a').mouseenter(function() {
        $('#selection').animate({
            height: '200px'
        }, 500);

    });

   $('#selection').mouseleave(function(e) {

        $('#selection').animate({
            height: '50px'
        }, 200);
    });

});
</script>

<style type="text/css">

#selection {
height: 50px;
width:250px;
overflow: hidden;
position: relative;
padding: 0; 
magin: 0;
}

#selection a {
display: block;
border: 2px solid green;
position: absolute;
left: 5px;
top: 5px;
height: 20px;
width: 235px;
background: red;
padding: 0; 
magin: 0;
cursor: pointer;
color:#ddd;
text-align:center;
font:normal 12px/20px arial;
text-decoration:none;
}
#selection a:hover{
	color:#fff;
	background:lightcoral;
}


</style>

</head>
<body>

<div id="selection">
  <a title="dummy link" href="#">Text Here</a>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Lithospermum_arvense_W.jpg/250px-Lithospermum_arvense_W.jpg" usemap="#xyz" alt=""/>
  <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>
</div>



</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.