Creating a rollover image.

[daniel0012]

I am creating an image gallery, and one thing I would like to have is when a user rolls over a thumbnail, the image is displayed and disappears when the user rolls off the thumbnail.

Does anyone know of a good tutorial that shows how to do this?

[Costin Trifan]

There are a lot of ways to have a rollover effect...Is there a live example of what you want so we can have an idea of it?

Some examples:
- hovering over one image and the same image is displayed at it's real size in a different place on the page
- the same as above, only that the image is resized in the same place
...
and so on...

[daniel0012]

Originally Posted by Costin Trifan

- the same as above, only that the image is resized in the same place
...
and so on...

Yes, when you hover over the the thumbnail and the full image is displayed in the same place.

I couldn't find an example of it though.

[Taltos]

Hey daniel, try this:

http://sonspring.com/journal/hoverbox-image-gallery

I didn't look hard at it but it is a tutorial or you can just download the code and use it. The example looked pretty good. Check it out and let us know if it works for you.

[Costin Trifan]

I might be kind of late here..(you probably figured how to do it already), but anyway:

the HTML:

<div id="GalleryWrapper">
    <img id="GalleryImage1" class="ImageNormal" alt="Image1" src="rss.gif" /><img id="GalleryImage2"
        alt="Image 2" class="ImageNormal" src="rss2.gif" /><img id="GalleryImage3" alt="" class="ImageNormal"
            src="rss_nav.gif" />
</div>

the CSS:

DIV#GalleryWrapper {
    width: auto;
    height: auto;
    padding: 3px 3px 3px 3px; /* T R B L */
    text-align: left;
    vertical-align: top;
}

DIV#GalleryWrapper IMG {
    border: none;
    cursor: pointer;
}

IMG.ImageNormal {
    width: 16px;
    height: 16px;
    margin: 3px 3px 3px 3px; /* T R B L */
}

IMG.ImageNormal:link, IMG.ImageNormal: visited {
    width: 16px;
    height: 16px;
    margin: 3px 3px 3px 3px; /* T R B L */
}
IMG.ImageNormal:hover {
    width: 20px;
    height: 20px;
    margin: 1px 1px 1px 1px; /* T R B L */
}

hope this helps,

Costin

[daniel0012]

Thank you so much, that's exactly it.

[Costin Trifan]

You're welcome, Daniel!