Javascript enlarge images on rollover

Posted on 2007-07-29
Last Modified: 2013-11-19

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?

Question by:Ten-Former
    LVL 28

    Accepted Solution

    Hi, do you mean something like this?

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    #container { border:1px solid #ccc; width:300px; height:200px; }

    function showImg(imgSrc,target) {

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

    <div id="large">
      <a href="">
        <img id="largeImage" src="" onMouseOut="'none';">


    Author Comment


    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).

    Author Comment

    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.

    Author Comment

    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
    LVL 28

    Expert Comment

    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;}
    #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)...
    LVL 28

    Expert Comment

    >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="'none';">


    Author Comment

    Prefect, thanks a lot, especially u were so damn quick :D


    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Join & Write a Comment

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now