This blog has moved here: www.bloggermint.com
Rethnaraj Rambabu Friday, January 15, 2010

In this post, I will show how to create an opacity/transparency effect for an image on mouseover. Rather than using an image without any effects, this would be a better option to show your images in your site especially if you use images as hyperlinks.

This is how the normal HTML code for image below will look like:



<img border="0" src="http://3.bp.blogspot.com/_b8IA1ajBJG8/S1Bzny55y6I/AAAAAAAAAYw/MXH2Nrj8vmE/s320/flower1.png" />

This is how it will look like if you use opacity/transparency effect for the image.


and here is the code for the image above.

<img src="http://3.bp.blogspot.com/_b8IA1ajBJG8/S1Bzny55y6I/AAAAAAAAAYw/MXH2Nrj8vmE/s320/flower1.png" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" />

This is an example of image which is hyperlinked.



Conclusion:-

Code for image without hyperlink

<img src="YOUR_IMAGE_URL_HERE" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Code for image with hyperlink

<a href="YOUR_LINK_URL_HERE"><img src="YOUR_IMAGE_URL_HERE" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a>


0 comments:

Post a Comment

Copyright 2010 Introblogger
Designed by Rethnaraj Rambabu
Introblogger | The free blogging guide - Blogged Web Statistics