We all have witnessed the transparent and hover effects on websites. The very common approach which web designers and developers follow is that they make the object [transparent] when a mouse hovers above it. This transparency varies depending upon the canvas/button/image upon which the effect is to be applied. Myriad of Javascript codes are available over the web to apply these effects but it's even much simple to understand the concept behind it and use it by yourself. All you need is a few basics of CSS & HTML and that's it you're done !!!
Problem Definition : Apply transparent effect to an Image when mouse hovers above it.
Theoretical Approach : Under normal situation the transparency is absolute i.e. 1.0 (For Others) and 100 (For IE). When the mouse hovers above the image it should set the transparency to 0.4 (for Others) and 40 (For IE).
Practical Approach : Define two CSS classes which do the above i.e one for applying the transparency and the other for setting it to normal. The event handlers for [onmouseover] and [onmouseout] can be handled by inline Javascript.
CODE Snippet :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>** Transparency Effect Example **</title>
- <style type="text/css">
- .fadein
- {
- filter:alpha(opacity=40);
- opacity:0.4;
- }
- .fadeout
- {
- filter:alpha(opacity=100);
- opacity:1.0;
- }
- </style>
- </head>
- <body>
- <img src="Search.gif" alt="Search Image" onmouseover="this.className='fadein'" onmouseout="this.className='fadeout'" />
- </body>
- </html>
Note :
- Internet Explorer takes the 'filter' property as mentioned in the CSS class to render the transparency. Rest all browsers accept the 'opacity' property.
- Maintain the order of the property as mentioned in the CSS class. Interchanging it will result in the effect ceasing to work in IE.
- Avoid using double quotes ["] for the properties in CSS as it malfunctions in IE.
0 comments:
Post a Comment