Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2852
  • Last Modified:

Javascript enlarge images on rollover

Hello,

I have a question for javascript. I will have a small set of images on my website, and I was wondering how you can make it so when you rollover an image, a bigger preview would be displayed, and if you click on that again it opens an url? If you would simply move your mouse away from the bigger preview image again it would simply disappear?


Thanks
Max
0
Ten-Former
Asked:
Ten-Former
  • 4
  • 3
1 Solution
 
TNameCommented:
Hi, do you mean something like this?

You'll need e.g. 6 images (just an example):
small1.gif, small2.gif, small3.gif
and
large1.jpg, large2.jpg', large3.jpg


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container { border:1px solid #ccc; width:300px; height:200px; }
</style>

<script>
function showImg(imgSrc,target) {
  document.getElementById('largeImage').src=imgSrc;
  document.getElementById('largeImage').style.display='';
  document.getElementById('largeImage').parentNode.href=target;
}
</script>
</head>
<body>

<div id="container">
<img id="id1" src="small1.gif" onMouseover="showImg('large1.jpg','http://www.google.com');">
<img id="id2" src="small2.gif" onMouseover="showImg('large2.jpg','http://www.google.com');">
<img id="id3" src="small3.gif" onMouseover="showImg('large3.jpg','http://www.google.com');">
</div>

<div id="large">
  <a href="">
    <img id="largeImage" src="" onMouseOut="this.style.display='none';">
  </a>
</div>

</body>
</html>
0
 
Ten-FormerAuthor Commented:
Hey,

Thanks for this so far, this is coming really close to what i ment. But what is really bothering me bout this is that i can not set where the preview is displayed, and when the mouse moves away from the preview (big image) then it still stays. Is there a way to put the preview image on a special loaction on the screen a layer above the website (because this brakes tables at the moment).
0
 
Ten-FormerAuthor Commented:
Nevermind what I last said, it is even better this way. But what is still annoying is that the big image has a border around it, and that there is an image not found icon displayed until the mouse moves over something.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ten-FormerAuthor Commented:
i fixed that thing with the border, sry i didnt look at the code the right way in first place, but i am seriously wondering how i stop the image missing icon from displaying
0
 
TNameCommented:
To position the preview freely, you could use position absolute and set the coordinates as you need them, e.g.:

#large {position:absolute; top:0px; right:40px;}
or
#large {position:absolute; top:0px; left:50%;}


>and when the mouse moves away from the preview (big image) then it still stays.
Do you mean that the preview image doesn't disappear on mouseOut? That's strange, it should disappear (and it does for me)...
0
 
TNameCommented:
>Nevermind what I last said
Oh, hadn't read that before posting...

About the missing image icon (in IE I guess):
You could use a small placeholder image, or even better, set it to display:none at the beginning:

<img style="display:none;" id="largeImage" onMouseOut="this.style.display='none';">

0
 
Ten-FormerAuthor Commented:
Prefect, thanks a lot, especially u were so damn quick :D

Thanks,
Max
0

Featured Post

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.

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