Web App rollover image

[Guest]

Hi, I was wondering if it was possible to create a rollover image or a:hover image in the web app itself. I want to be able to add 2 image into the web app then when you hover over the image it disaplys the hidden image.

Would it just be easier to do it in css ?

Jack

[Nicole_-_BCGurus_com]

You would have to use CSS anyway, have both images listed inside a wrapping element and change the background position with CSS on hover. Wrapping element should have a position relative and overflow hidden as well.

Nicole - BCGurus.com

[Liam Dilley]

That is not quite right Nicole and a bit confusing for people and a mix of two sollutions as well.

Option 1:

Set the background of an element as one image and hover over the element CSS hide the image in that element (say an anchor).

Option 2:

Main element container as Nicole partly indicated to as a relative position. Two images in that element with both asbolute positioned and both have classes to target. One having a higher index then another. Hover over hides one of the images to reveal the other.

CSS3 transutions can be used to create effects or you can use say jQuery to create animation and reveal effects on .hover() etc.

Lots of options though, the above is real basic lead into them. It depends on the style, images and way they are being used in the web app.

[Nicole_-_BCGurus_com]

Liam,  you are mainly repeating what I said in the first place. I'm confused...

[thetrickster888]

Your first suggestion indicated putting two images inside a wrapping element. If that's the case then the background-position strategy won't really work because you have two IMG elements inside a parent container and unlesss the IMG elements have a background setup for it (which it wouldn't since you are using IMGs) then it's alittle confusing.

I'd do a version of Liam's number 2 (heh.)  I would just make a parent container that has a CSS background set as the default, non-hoverable image. And, inside that container I'd have one IMG element that is set as the hoverable image and is absolutely positioned to the relative parent container. Then my css would be :

.my_container { position: relative; overflow:hidden; width: 100px; height: 100px; background: transparent url(/to/my/default/image.png) no-repeat scroll 0 0; }
.my_container img { display: none; position: absolute; width: 100px; height: 100px; }

.my_container:hover img { display: block; }

The only issue is with older browsers like IE.  I know that the DOCTYPE must not be strict for the :hover CSS to work on non link elements.  For maximum compatiblity, make your .my_container element a link element instead of a div and it should work.

[Nicole_-_BCGurus_com]

Now I got it because I said background-position, I meant to say position (sorry), tried my approach here though and it works well:

http://nicolessandbox.hotpressplatform.com/test-1

CSS:

            #container {
            width:158px;
            height:158px;
            overflow:hidden;
            position:relative;
            }
            .image, .image-hover{
            position:absolute;
            }
            image-hover{
            position:absolute;
            }
            .image:hover > .image-hover {
            top:0;
            }

HTML:

        <div id="container">

<div class="image"><a   href="/image-hover/test"><img src="/images/image.jpg" border="0" alt="" /></a>

<div class="image-hover"><a   href="/image-hover/test"><img src="/images/image-hover.jpg" border="0" alt="" /></a></div>

</div>

</div>