![]() |
|||||||||||||||
| Home --- Topics --- Articles --- Forum --- Offers --- Register --- Contact us | |||||||||||||||
|
|
|||||||||||||||
|
Did you know? if you register at Hamid School you can save up to 45% on hosting packages offered by Surreyhost.com . Don't miss out, every minute counts! Are you Confused? Click here to learn how to use hamid school CSS Image Opacity TransparencyNote: This is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation. Example 1 - Creating a Transparent ImageFirst we will show you how to create a transparent image with CSS. Regular image:
The same image with transparency:
Look at the following source code:
Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x). Tip: The CSS3 syntax for transparency is opacity:x. In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent. In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent. Example 2 - Image Transparency - Mouseover EffectMouse over the images:
The source code looks like this:
We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it. The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100. When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.
Viewed:67
Did you know? if you register at Hamid School you can learn web programming and designing for free and also you can save up to 45% on hosting packages offered by Surreyhost.com . Don't miss out, every minute counts!
|
|
||||||||||||||
|
Sponsored by: Surreyhost.com Coded and designed by: Hamid Moudi HPLA |
|||||||||||||||