Rollover Image with Lightbox2?

[boohoowoofoo]

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!

 

[brisbaneguy29]

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>

 

[manueld]

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.