~*~ Lycentia's Sm Graphics ~*~

+ Main Designs
+ Main Menu Designs
+ Corner Layouts
+ Popup

+ 88x31
+ 200x40
+ 230x60
+ 400x60
+ 400x80
+ 400x100

+ Video Game Sprites
+ Guestbook Image Maps
+ Guestbook Buttons
+ Splash Images
+ Seperators
+ Background Tiles

+ Fonts
+ Tutorials
+ Graphic F/X Tutorials
+ Links
+ Email Me
+ Sign The Guestbook
+ View The Guestbook
+ Cliques

October:
Sailor Pluto

800 | 1024

Previous Wallpapers

This fun little effect makes an image appear semi transparent, and when you put your mouse over it, gradually makes it solid. Or, vise versa.
Great for link buttons.

Move your mouse over the images.

First, add this between your <HEAD> </HEAD> tags.
<script language="JavaScript1.2"> /* Gradual-Highlight Image Script II- By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca) Permission granted to Dynamicdrive.com to feature script in archive For full source to script, visit http://dynamicdrive.com */ nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); /* object - image to be faded (actual object, not name); * destop - destination transparency level (ie 80, for mostly solid) * rate - time in milliseconds between trasparency changes (best under 100) * delta - amount of change each time (ie 5, for 5% change in transparency) */ function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ //do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } </script>

Then, add this to your IMG tag:
style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)"
onmouseout="nereidFade(this,10,30,5)"

opacity=10 - This is the opacity the image will start at.
100,30,5 - The first number is destination transparency level (ie 100 is totally solid)
The second number is the rate in milliseconds between trasparency changes. (best under 100)
The third number is the amount of change each time (ie 5, for 5% change in transparency)
10,30,5 - Same as above. If you want the image to return to the same opacity when the mouse is removed, make the first number match the amount.

Source: DynamicDrive.Com