css opacity in javascript

I want register JavaScript events to toggle CSS opacity on selectable images.

For example, given a div with a list of images like the following,

I would like these images to be 50% transparent but 80% visible during a mouseover. I would also like these images to be selectable, i.e., an image should become fully visible after clicking it.

I would like to do this in JavaScript without having to modify the html image list.

We could add transparency in the stylesheet, as well as the mouseover effect, e.g.,

#foo_images img {

filter: alpha(opacity=50);

opacity: 0.5;

}

#foo_images img:hover {

filter: alpha(opacity=80);

opacity: 0.8;

}

In practice, it is highly recommended to keep all presentation elements in the stylesheet, but for the sake of example we can adjust an objects transparency using JavaScript, e.g.,

//set obj transparency to 50%

obj.style.opacity = 0.5; //non-IE browsers

obj.style.filter = ‘alpha(opacity=50)’; //IE

Using this approach, we can register events with JavaScript so that the transparency will change as the cursor hovers over, e.g.,

obj.onmouseover = function() {

obj.style.opacity = 0.8;

obj.style.filter = ‘alpha(opacity=80)’;

}

obj.onmouseout = function() {

obj.style.opacity = 0.5;

obj.style.filter = ‘alpha(opacity=50)’;

}

This would obviously be a lot of repeated code so we can use JavaScript closures, e.g.,

function opacityC(obj, value) {return function() {

obj.style.opacity = value/100;

obj.style.filter = ‘alpha(opacity=’ + value + ‘)’;

}}

obj.onmouseover = opacityC(obj,80);

obj.onmouseout = opacityC(obj,50);

Next, to make the images selectable we can assign onclick events. We’ll need to toggle between selected and not-selected, so we’ll dynamically add a selected attribute to the image object. We can use the same closure approach to assign a function to the onclick event, e.g.,

function toggleSelectC(obj) {return function() {

if (obj.selected != ‘selected’) {

opacityC(obj, 100)();

obj.onmouseout = opacityC(obj, 100);

obj.style.border = ‘1px solid black’;

obj.selected = ‘selected’;

} else {

obj.onmouseout = opacityC(obj, 50);

obj.style.border = ‘1px solid white’;

obj.selected = ”;

}

}}

image1.onclick = toggleSelectC(image1);

image2.onclick = toggleSelectC(image2);

Finally, we will loop through all of the images in the div, set the initial transparency and add event handlers, e.g.,

var obj = document.getElementById(‘foo_images’);

var images = obj.getElementsByTagName(“img”);

for (var i = 0; i < images.length; i++) {var img = images[i];opacityC(img,50)();img.onmouseover = opacityC(img, 80);img.onmouseout = opacityC(img, 50);img.onclick = toggleSelectC(img);}Putting this all together, you would have the following HTML and JavaScript:

Applying the above code to the three sample images will produce the following results:

This entry was posted in , , , . Bookmark the .

Comments are closed.