As you using images on your posts or blog, you would like to add additional effects to them rather than displaying them stand still and you may mean to catch more eyes on it. You may have already seen this on another site and actually it would be really helpful for you as it catches readers' eyes on those images with transparency on hover. So you can use this effect on images which you may need to convey messages or need to click by the readers. It would be image banner/advertisement, creative images with link which you may intended to navigate readers to your fan pages, feeds etc. Implementing this hover effect is now more easier too.
Steps:
1. Locate your image HTML code - i.e: <img src="...." ..../>.
2. Now insert below attributes to your image HTML tag and specify values as you prefer - i.e: <img src="MyImage.PNG" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100"/>
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100"
Color Indication Information
- Transparency Property for Internet Explorer
This attribute use by Internet Explorer to detect the transparency. It's value range is 0 to 100
- Transparency Property for Other Browsers
This attribute use by other Internet Browsers to detect the transparency. It's value range is 0.0 to 1.0
- Opacity, when the Mouse Pointer Over the Image
Specify the opacity value to transparent image when mouse over, according to the attribute value range
- Opacity, when the Mouse Pointer not Over the Image
Specify the opacity value to transparent image when mouse not over, according to the attribute value range
0 comments:
Post a Comment