Solved

Large image on thumbnail mouseover

Posted on 2010-11-25
7
1,406 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
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.

 

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

636 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