Slide 5.31: CSS image opacity/transparency (cont.)

CSS Image Opacity/Transparency (Cont.)

Example 2: Image Transparency—Mouseover Effect

Mouse over the images:

The source code looks like this:

 <img src="klematis.jpg" 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" />

 <img src="klematis2.jpg" 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" />

We see that the first two lines 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 Mozilla 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.

Demonstration
The following demonstration shows how the script of HTML and CSS is displayed on the Web:


<html> <head> <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40); } </style> </head> <body bgcolor="#EDF3FE"> <h2>Image Transparency</h2> <img src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/klematis.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> <img src="http://undcemcs01.und.edu/~wen.chen.hu/course/260/5/figure/klematis2.jpg" width="150" height="113" alt="klematis" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body> </html>