Clicking thumbnails to get enlarged image

[jimsays]

What I am looking to do is display six images of a product on my site and when you click each thumbnail the larger image displays above. A perfect example of what I am looking to do is found on this site.
http://www.sharpusa.com/ForHome/HomeEntertainment/LCDTVs/LC60LE830U.aspx

Any help on achieving this would be greatly appreciated. Thanks

 

[Nathan Joshua]

I would suggest using hover events for something like this. It can easily be done with CSS/HTML without having to resort to the onClick="event"

CSS

.hoverbox{
cursor: default;
list-style: none;
}
.hoverbox a{
cursor: default;
}
.hoverbox a .preview{
display: none;
}
.hoverbox a:hover .preview{
display: block;
position: absolute;
top: 300px;
left: 0px;
z-index: 1;
}
.hoverbox img{
vertical-align: top;
width: 90px;
height: 90px;
}
.hoverbox li{
color: inherit;
display: inline;
float: left;
margin: 3px;
position: relative;
border: 1px solid #000000;
}
.hoverbox .preview{
margin-top: -324px;
margin-left: 494px;
width: 430px;
height: 430px;
border: 1px solid #000000;
}
.hoverbox .preview2{
margin-top: -324px;
margin-left: 396px;
width: 430px;
height: 430px;
border: 1px solid #000000;
}
.hoverbox a .preview2{
display: none;
}
.hoverbox a:hover .preview2{
display: block;
position: absolute;
top: 300px;
left: 0px;
z-index: 1;
}
.hoverbox .preview3{
margin-top: -324px;
margin-left: 298px;
width: 430px;
height: 430px;
border: 1px solid #000000;
}
.hoverbox a .preview3{
display: none;
}
.hoverbox a:hover .preview3{
display: block;
position: absolute;
top: 300px;
left: 0px;
z-index: 1;
}

HTML

<ul class="hoverbox">
<li>
<a href="#"><img src="1.jpg" alt="description" /><img src="1.jpg" alt="description" class="preview" /></a>
</li>
<li>
<a href="#"><img src="2.jpg" alt="description" /><img src="2.jpg" alt="description" class="preview2" /></a>
</li>
<li>
<a href="#"><img src="3.jpg" alt="description" /><img src="3.jpg" alt="description" class="preview3" /></a>
</li>

Hope this helps

 

[CaldwellYSR]

Check out JQuery Lightbox