Rollover Image with Lightbox2?

Discussion in 'Web Design and Development' started by boohoowoofoo, Mar 2, 2011.

  1. boohoowoofoo macrumors newbie

    Joined:
    Nov 28, 2007
    #1
    Hey guys!

    Anyone know if it is possible to make use of rollover images while using Lightbox2?

    The problem is I am unable to mix in the CSS code for an image while fitting in the Lightbox2 code in the same image. here is what My lightbox2 code is:

    <a href="images/Minah_sBusinesscard.pdf-1.jpg" rel="lightbox" title="Minah's Sweets Business Card"><img src="images/minahbw.png"></a>

    The HTML code I need to put a roll over image is:


    <a href="#" class="rollover" title="Webvamp"><span class="displace">Webvamp</span></a>


    CSS style sheet I am using *found online* is:

    a.rollover {
    display: block;
    width: 800px;
    height: 100px;
    text-decoration: none;
    background: url("webvamp.jpg");
    }

    a.rollover:hover {
    background-position: -150px 0;
    }

    .displace {
    position: absolute;
    left: -5000px;
    }

    Anyone know how I can make this work?

    If not is there a better solution to get the lightbox effect but still get roll over images? I wanted to be able to have an icon, show a preview when you bring your mouse over, and then have it open up to the lightbox view.

    Thank you guys for any help you can provide!
     
  2. brisbaneguy29 macrumors 6502

    brisbaneguy29

    Joined:
    Nov 27, 2007
    Location:
    Brisbane
    #2
    Try This, you just need to add the rollover class on the tag.


    <a href="images/Minah_sBusinesscard.pdf-1.jpg" rel="lightbox" title="Minah's Sweets Business Card" class="rollover"><img src="images/minahbw.png"></a>
     
  3. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #3
    What you need to do is get rid of "<img src="images/minahbw.png">". Instead put text there, with a description of what it is.

    ex:
    HTML:
    <a class="rollover" href="images/Minah_sBusinesscard.pdf-1.jpg" rel="lightbox" title="Minah's Sweets Business Card">Minah's Sweets Business Card</a>

    CSS:
    a.rollover {
    display: block;
    width: 800px;
    height: 100px;
    text-decoration: none;
    text-indent: -9999em;
    background: url("webvamp.jpg") left top;
    }

    a.rollover:hover {
    background-position: left bottom;
    }

    Create the "webvamp.jpg" and the rollover state below the exact image so that your image is actually 200px high and your just shifting the image up.
     

Share This Page