Image replace opening in new window
I'm having trouble doing an image replace. When you click on the thumbnail link to replace the large image, it opens in a new window instead of replacing the current image.
Let me know if you have any questions. Hopefully you can spot my error.
Thank you in advance for any help.
-
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#thumbs a').click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
});
});
</script>
</head>
<body>
<div style="background:#000; height:400px; width:600px; color:#FFFFFF; ">
<div id="view" style="padding:20px;">
<div id="bigimg" style="float:left; width:250px; margin-left:10px; margin-top:10px; text-align:center">
<img id="largeImg" src="images/large1.jpg" alt="">
</div>
<div id="details" style="float:right; width:270px; margin-right:10px;">
<h2 style="padding-top:20px">first</h2>
<p>
height / weight
</p>
<p>
color info
</p>
<p style="padding-bottom:25px;">
price
</p>
<hr style="color:#009900; background-color:#009900; height: 5px; " >
<div id="thumbs">
<a href="images/large1.png" title="first"><img src="images/small1.png" alt="" height="83" width="62" style="padding:0 5px;"></a>
<a href="images/large2.png" title="second"><img src="images/small2.png" height="83" width="62" style="padding:0 5px;"></a>
<a href="images/large3.png" title="third"><img src="images/small3.png" height="83" width="62" style="padding:0 5px;"></a>
</div>
</div>
</div>
</div>
</body>
</html>