• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1453
  • Last Modified:

Large image on thumbnail mouseover

Hi guys
I need a javascript or CSS script that would show a large image when you mouseover a thumbnail
The large image should pop up in the same location where the thumnail is
Your help is appreciated.
Dory

0
dory550
Asked:
dory550
1 Solution
 
Pearl_export_benCommented:
Hi Dory,

A Quick look on google (The First Result) :P  Gave me this:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

is this similar to what you are looking for or are you after something different?

Sorry to ask, but Image popping up in the same window is a little confusing.. Could mean it replaces the smaller image, appears next to it or even pops into a black/grey overlay box similar to some flash sites and photo galleries.

Ben
0
 
Michel PlungjanIT ExpertCommented:
Something like

<script type="text/javascript">
function show(img) {
  document.getElementById('bigImg').src=img;
  document.getElementById('imgSpan').style.display="";
}
function hide() {
  document.getElementById('imgspan').style.display="none";
}
</script>
<a href="images/image1.jpg" onmouseover="show(this.href)"
onmouseout="hide()" onclick="return false"><img src="images/image1_th.jpg" border="0" /></a>
<a href="images/image2.jpg" onmouseover="show(this.href)"
onmouseout="hide()" onclick="return false"><img src="images/image2_th.jpg" border="0" /></a>
<span style="display:none" id="imgSpan"><img id="bigImg" src="images/image1.jpg" /></span>
0
 
Loganathan NatarajanLAMP DeveloperCommented:
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
dory550Author Commented:
Hi Guys
reviewing the 3 comments above I think that Jquery maybe the way to go as demostrated
logudotcom: link (above).
Assuming I get the Jquery JS lib (Which I am not too familiar with) can someone provide me wi th a script  that would replace a thumbnail with a larger image on mouseover using the location of the thumbnail as shown by logudotcom:
Thank you
Dory
0
 
Michel PlungjanIT ExpertCommented:
Just view the source of
http://www.sohtanaka.com/web-design/examples/image-zoom/
and that is it.
0
 
dory550Author Commented:
mplungjan:
Very good idea thank you
this is just what I needed
Thks
Dory
0
 
Michel PlungjanIT ExpertCommented:
Thanks some points for logoutdotcom could be in order?
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now