Rollover on an Image link (with jquery)
Hi everybody,
I have a problem here. I'm trying to create a rollover on an image link, but it does not work correctly.
I have 2 image links, if I go over a link with my mouse it should do nothing (so far so good), but by leaving this link again (mouseleave) the image link should get a specific border around it using the jquery addClass() function. And that is what doesn't work !?!
I hope you can help me...
here is my html code.
-
<!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>Untitled Document</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
img{border:0px;}
/*This class should be added to the image... */
.imgBorder
{
border-style:solid;
border-width:medium;
border-color:#FFCC00;
}
#id_oneA
{
width:32px;
height:32px;
}
#id_oneB
{
width:32px;
height:32px;
}
</style>
<script type="text/javascript">
$(document).ready(function(evt){
$("a:has(img.pic)").hover(function()
{
return false;
},function()
{
$("a:has(img.pic)").removeClass("imgBorder");
$(this).addClass("imgBorder");
return false;
}
);
});
</script>
</head>
<body>
<a id="id_one" href="someimage_1.jpg"> <img id="id_oneA" class="pic" src="img.jpg"/> </a>
<a id="id_two" href="someimage_2.jpg"> <img id="id_oneB" class="pic" src="img.jpg"/> </a>
</body>
</html>