Friday, January 15, 2010
Blogger Hacks
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgm_fiaYV_1jsAdo-fy5-DyI-OUzcnq7LLYzqd78-pdT9AEAaW4CiUa3tmpYdU6KriccBri1i0ATwbjLcUn0zCGTboAnQ-iRqj8M69mEQenf1AD7Nzuv1LJreOslCJB4vU2G9k56GttGsy/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgm_fiaYV_1jsAdo-fy5-DyI-OUzcnq7LLYzqd78-pdT9AEAaW4CiUa3tmpYdU6KriccBri1i0ATwbjLcUn0zCGTboAnQ-iRqj8M69mEQenf1AD7Nzuv1LJreOslCJB4vU2G9k56GttGsy/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>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment