Transparent Roll Over Pictures Whats the code for tranparent pictures

[BooZker 0]

I dont want just transparent pictures i want a sort of rollover image. I see this done on myspace a lot. A transparent picture that when you roll over is less transparent. I want that for my site. Go to:

http://forums.xisto.com/no_longer_exists/

And look at the thumbnail at the beginning. I want that to be a transparent image that when you roll over it, it becomes less transparent. Ive seen this in HTML and CSS. Either way is fine with me.

I looked on this site and google, but never really found what i wanted. Almost everyone was only how to make it transparent, but not roll over.

Edited December 24, 2006 by BuffaloHELP (see edit history)

[BuffaloHelp 24]

The simplest way of achieving this technique is onMouse over function.

http://www.computerhope.com/onmouse.htm

You must have two images: one transparent and default on loading, and another one to achieve desired effect when mouse is placed on top.

The page I gave as a reference is very easy to understand and customize. Hope that helps.

Additional information: you can speed up the transition by preloading images on body load. This script and tutorial is found under Tutorial section.

If you want to achieve this as CSS, it's just modifying a and a.hover and setting background-image: url(image); for both before and after. Hover is when the mouse is over any <a href="..." link. This can be used just for CLASS system where only activated when <a href="..." class="rollover"> where class rollover is set to show a different picture/text format.

PS. much better with topic title this time.

[Saint_Michael 3]

To expand a bit on buff post on CSS rollovers it would look more like this

CSS

.home {background: url('images/home.gif') no-repeat;width: 40px;height: 31px}.home a {width: 40px;height: 31px;display: block;}.home a:hover {background: url('images/home_h.gif') no-repeat;}

HTML

class="home">

Then you would apply that class to your images and your set. Of course adjust the code accordingly to fit your design.

[jlhaslip 4]

Here is a pretty good link to figure out the gist of Transparencies and Opacity.

http://forums.xisto.com/no_longer_exists/

There are plenty of examples of on:hover roll-overs, etc.

[BooZker 0]

jlhaslip i went to that site to. I didnt even notice they had that section at the bottom. That is exactly what i want. Thank you.BuffaloHELP i know actual rollovers with two images, but i wanted just CSS design.