Jun
20
2008
Easy Image Rollover with Opacity PDF Print E-mail
HariesDesign.com With CSS all you need to do is put a piece of code in your style sheet to automagically make image or text rollovers. You don't need a second image or scripting.
 

Sample Click here

Step 1

Put the code in the head section of your page between the <HEAD> and the </HEAD>. You only have to do this once.

<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);  
-moz-opacity: 1.0;  
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
 

 

Step 2

Then add <a class="linkopacity" to the link when you want to make the rollover. It works with hyperlinked text and images.

 <a class="linkopacity" href="http://www" title="Tutorials" ><img src="http://www.hariesdesign.com/new/images/img1.jpg" border="0" style="border:1px solid black;"  width="32" height="32" alt="tutorials"></a>
<a class="linkopacity" href="http://www" title="tutorials" ><img src="http://www.hariesdesign.com/new/images/img2.jpg" border="0" style="border:1px solid black;"  width="32" height="32" alt="tutorials"></a>

 

 
< Prev   Next >

Gallery Photography

Login

Sponsors


Get Chitika Premium