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″ />
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>
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ /></a>