Solved

Large image on thumbnail mouseover

Posted on 2010-11-25
7
1,392 Views
Last Modified: 2012-05-10
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
Comment
Question by:dory550
7 Comments
 
LVL 8

Expert Comment

by:Pearl_export_ben
ID: 34212208
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34212210
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
 
LVL 36

Expert Comment

by:Loganathan Natarajan
ID: 34212282
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:dory550
ID: 34212821
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 34212936
Just view the source of
http://www.sohtanaka.com/web-design/examples/image-zoom/
and that is it.
0
 

Author Closing Comment

by:dory550
ID: 34215766
mplungjan:
Very good idea thank you
this is just what I needed
Thks
Dory
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34215789
Thanks some points for logoutdotcom could be in order?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question