Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1446
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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