5 Replies Latest reply on Oct 24, 2012 12:31 PM by Nicole - BCGurus.com

    Web App rollover image

    jfbourner

      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

        • 1. Re: Web App rollover image
          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

          • 2. Re: Web App rollover image
            Liam Dilley Adobe Community Professional & MVP

            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.

            • 3. Re: Web App rollover image
              Nicole - BCGurus.com Level 3

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

              • 4. Re: Web App rollover image
                thetrickster888 Level 4

                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.

                • 5. Re: Web App rollover image
                  Nicole - BCGurus.com Level 3

                  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>