Not signed in (Sign In)

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.


Archive: Rollover action.

Bottom of Page

1 to 3 of 3

  1.  
    • CommentAuthorphilips
    • CommentTimeNov 18th 2006
     
    I have pictures that I am putting on a website, but if I were to place them on the site, the page would take forever to load. How can I put a picture, thumbnail size on a page and once the mouse goes over the picture it pops-up full size?
    • CommentAuthorgilray
    • CommentTimeNov 18th 2006
     
    See if this is what you're after

    <html>
    <head>
    <title>JavaScript Image Rollovers</title></head>
    <body>
    <a href="link.html"
    onMouseOver="document.image1.src='onImage.gif'"
    onMouseOut="document.image1.src='outImage.gif'">

    <img src="outImage.gif" name="image1">

    </a>
    </body>
    </html>

    <html>
    <head>
    <title>JavaScript Image Rollovers</title>
    <script>
    <!-- Hide Script
    function move_in(img_name,img_src) {
    document[img_name].src=img_src;
    }

    function move_out(img_name,img_src) {
    document[img_name].src=img_src;
    }
    //End Hide Script-->
    </script>
    </head>
    <body>
    <a href="link.html"
    OnMouseOver="move_in('image1','image_on.gif')"
    OnMouseOut="move_out('image1','image_out.gif')">

    <img src="image_out.gif"
    alt="Move your mouse over here!" name="image1">

    </a>
    </body>
    </html>
    • CommentAuthorjustnajm
    • CommentTimeNov 19th 2006
     
    Hi,

    gilray this method will also take time to load the image.

    Try using compressed file format, gilray has given a good code example.

    As you state the page loading speed getting down then you should not let user to give him an opportunity to see the big picture on mouse over, as it will still take time to load, it can also disturb your web layout as becomes large.

    open the big image in a popup window, and use thumbnails in the page.

1 to 3 of 3

  1.