close

YOOtoppanel

The YOOtoppanel module is fully configurable and any article or module can be published here.
Toppanel
YOOtheme
YOOaccordion
YOOaccordion Articles or modules can be published in the YOOaccordion module.
YOOspotlight
YOOlightbox
YOOlogin

Sponsored Links

Annonces Google

YOOspotlight PDF Print E-mail
YOOtheme introduces another new exclusive YOOtheme template feature. YOOspotlight!

YOOspotlight creates a smooth fading effect between two images while hovering a element. Now you can place cool spotlight effects all over your site.

How to

Create a div or span element with a background image (image.png) to display your image in your content. Add a class="spotlight" attribute to the div/span tag. The filename of the related image for the hover effect has to be named with the suffix _spotlight (image_spotlight.png) and has to be in the same folder as the background image (image.png).

Example for div tag:
<div class="spotlight" style="background: url(../images/logo.png);" width="240" height="180"></div>

Example for span tag:
<span class="spotlight" style="background: url(../images/logo.png); display: block;" width="240" height="180"></span>

If you want to put a link around the YOOspotlight image use span tags for the YOOspotlight to be XHTML 1.0 valid. And don't forget to add display: block to the CSS styling for the span tag.
Please Note: YOOspotlight is only working in IE6 with .jpg and .gif images. If you are using transparent .png images no effect is applied in IE6.