Is it even possible? If so, how do I go about doing it?

This is the code I have embedded in the body for the Mono-Image CSS Rollover:

<div id="play1button"><a href="play1.html" title="Why YOU need a vacation!"></a></div>

Obviously most of the code for the above is in the CSS file.

This is the code I'd normally use to embed a Video Lightbox onto a page:

<!-- Start VideoLightBox.com BODY section -->
<div id="videogallery">
<a rel="#voverlay" href="link-to-video" title="name-of-video"><img src="link-to-thumbnail" alt="alt-name-of-thumbnail" /><span></span></a></div>
<!-- End VideoLightBox.com BODY section -->

If it helps, the website is www.time4avacation.com

The 3 rollover images at the top are what I'm trying to make work with Video Lightbox.

Any help is very much appreciated!

Cheers.

Could you provide more information?

What is the Mono-Image CSS Rollover you are using?
Can you provide a link to the website for Video Lightbox?
Edit, just noticed the commented url VideoLightBox.com.

I could google it however there is no guarentee we are looking at the same site/code/application.

Additional note, the css class names are a bit crazy in your css file.

#i20102011wwwtime4avacationcomtext p a  {
   font-style: Normal;
   text-decoration: none;
   color: #FFFFFF;
}

#i20102011wwwtime4avacationcomtext p  {
   font: 12px/18px Arial;
   margin: 0px;
   color: #FFFFFF;
   text-align: center;
}

#i20102011wwwtime4avacationcomtext  {
   visibility: visible;
   position: absolute;
   left: 10px;
   top: 1350px;
   z-index: 5;
   width: 904px;

}

Hi Phunk Rabbit,

I designed the website using sitegrinder, a photoshop plugin that builds all the required css and html code for me after the design stage is completed in photoshop. For this reason the class names are a bit weird and I'm unable to give you much specific information.

I know it's a mono image CSS rollover because sitegrinder has saved the button and rollover images into one picture, and then uses CSS to hide the rollover side until cursor hovers over the button.

Here is all the CSS code that relates to the buttons/rollovers:

#play1button a:hover,
#play2button a:hover,
#play3button a:hover {
background-position: -102px 0%;
}

#play2button a,
#play3button a,
#play1button a {
background-repeat: no-repeat;
display: block;
height: 102px;
width: 102px;
background-position: 0% 0px;
font-size: 102px;
line-height: 102px;

#play3button,
#play1button,
#play2button {
visibility: visible;
position: absolute;
top: 114px;
z-index: 5;
width: 102px;
height: 102px;
}

#play1button a {
background-image: url(time4avacationmedia/play1button.png);
}

#play2button a {
background-image: url(time4avacationmedia/play2button.png);
}

#play3button a {
background-image: url(time4avacationmedia/play3button.png);
}

#play1button {
left: 53px;
}

#play2button {
left: 253px;
}

#play3button {
left: 454px;
}

I think that's all... Hope that helps!

Any ideas? Need any more information?

I know it's a mono image CSS rollover because sitegrinder has saved the button and rollover images into one picture, and then uses CSS to hide the rollover side until cursor hovers over the button.

That method is known as CSS SPRITES, just so you know going forward and WE know what it is you're talking about.

I'll only say one thing about that program you used - it has created a massively over-complicated soup of divs with way too much absolute positioning. That whole layout could be simplified a LOT by building it yourself.

According the VLB page, you need to put some code in your page - and I don't see anything like it in your page:

Step 4 - Add Video LightBox inside your own page.

Video LightBox generates a special code. You can paste it in any place on your page where you want to add video popup.
* Export your LightBox gallery using Video LightBox app in any test folder on a local drive.
* Open the generated index.html file in any text editor.
* Copy all code for Video LightBox from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a gallery (inside the BODY tag).

<head>
...
<!-- Start VideoLightBox.com HEAD section -->
.....
<!-- End VideoLightBox.com HEAD section -->
... </head>
<body>
...
<!-- Start VideoLightBox.com BODY section -->
.....
<!-- End VideoLightBox.com BODY section -->
...</body>

All good - managed to find the solution myself... all working nicely now!

If anyone's interested in seeing what it was I was trying to achieve and how I accomplished this, feel free to look at the source code.

http://www.time4avacation.com

Thanks for the effort guys/gals.