Playing with pictures is always fun and these days, most pictures lead to one another page. Setting a highlight focus on a event just adds more to your web2.0 site. After all designing web pages is a art which requires both creativity and technique.

Take a look at this small window below. [image focus on select example - popout]

How is this done?

You might be surprised to see that the total frame includes under 40 lines of code and this change is made via a inline javascript call and good old CSS. Lets put each picture in a div (remember that this is a good practice ) and change the property of each div on mouseover and mouseout. We will initialize the divs to be dark, by means of assignment and further change them via javascript.

Take a look at the code below. Snippet 1 shows the CSS.

<style type=”text/css”>
div.dark {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}

div.light {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
</style>

Snippet two here shows how to call each of the classes, using javascript.

<TD><div class = “dark” onMouseOver = “this.className = ‘light’” onmouseout = “this.className = ‘dark’”> <img src=”ronaldo.jpg”></DIV></TD>

Image and idea coutesy - manutd.com

The css property of - moz-opacity is for older versions of firefox and is not required for firefox 2.0 (source)

The other property of opacity is for bad and old “internet explorer”. The basic idea is to control the opacity property, and change it on an event.

Tip : Set the background color of the page to black (you can use bgcolor = “#000000″) to make this effect pronounced.

Got struck here? Tip 2 : Use the class property to associate a class to a div, and use className property to set it using javascript.
Still need help : mail me at coder@codeinsane.com