{"id":314,"date":"2011-07-14T07:18:38","date_gmt":"2011-07-14T07:18:38","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=314"},"modified":"2012-12-25T22:39:37","modified_gmt":"2012-12-25T22:39:37","slug":"css-opacity","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/css-opacity\/","title":{"rendered":"css opacity in javascript"},"content":{"rendered":"

I want register JavaScript events to toggle CSS opacity on selectable images.<\/p>\n

For example, given a div<\/em> with a list of images like the following,<\/p>\n

\r\n<div id="foo_images">\r\n   <img src="foo.jpg" \/>\r\n   <img src="bar.jpg" \/>\r\n   <img src="baz.jpg" \/>\r\n   ...\r\n<\/div>\r\n<\/pre>\n
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.<\/p>\n
I would like to do this in JavaScript without having to modify the html image list.<\/p>\n
We could add transparency in the stylesheet, as well as the mouseover effect, e.g.,<\/p>\n
\r\n#foo_images img {\r\n   filter: alpha(opacity=50);\r\n   opacity: 0.5;\r\n}\r\n#foo_images img:hover {\r\n   filter: alpha(opacity=80);\r\n   opacity: 0.8;\r\n}\r\n<\/pre>\n
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.,<\/p>\n
\r\n  \/\/set obj transparency to 50%\r\n  obj.style.opacity = 0.5; \/\/non-IE browsers\r\n  obj.style.filter = 'alpha(opacity=50)'; \/\/IE\r\n<\/pre>\n
Using this approach, we can register events with JavaScript so that the transparency will change as the cursor hovers over, e.g.,<\/p>\n
\r\nobj.onmouseover = function() {\r\n  obj.style.opacity = 0.8;\r\n  obj.style.filter = 'alpha(opacity=80)';\r\n}\r\nobj.onmouseout = function() {\r\n  obj.style.opacity = 0.5;\r\n  obj.style.filter = 'alpha(opacity=50)';\r\n}\r\n<\/pre>\n
This would obviously be a lot of repeated code so we can use JavaScript closures, e.g.,<\/p>\n
\r\nfunction opacityC(obj, value) {return function() {\r\n  obj.style.opacity = value\/100;\r\n  obj.style.filter = 'alpha(opacity=' + value + ')';\r\n}}\r\nobj.onmouseover = opacityC(obj,80);\r\nobj.onmouseout = opacityC(obj,50);\r\n<\/pre>\n
Next, to make the images selectable we can assign onclick<\/em> events. We’ll need to toggle between selected and not-selected, so we’ll dynamically add a selected<\/em> attribute to the image object. We can use the same closure approach to assign a function to the onclick<\/em> event, e.g.,<\/p>\n
\r\nfunction toggleSelectC(obj) {return function() {\r\n  if (obj.selected != 'selected') {\r\n    opacityC(obj, 100)();\r\n    obj.onmouseout = opacityC(obj, 100);\r\n    obj.style.border = '1px solid black';\r\n    obj.selected = 'selected';\r\n  } else {\r\n    obj.onmouseout = opacityC(obj, 50);\r\n    obj.style.border = '1px solid white';\r\n    obj.selected = '';\r\n  }\r\n}}\r\n\r\nimage1.onclick = toggleSelectC(image1);\r\nimage2.onclick = toggleSelectC(image2);\r\n<\/pre>\n
Finally, we will loop through all of the images in the div<\/em>, set the initial transparency and add event handlers, e.g.,<\/p>\n
\r\n  var obj = document.getElementById('foo_images');\r\n  var images = obj.getElementsByTagName("img");\r\n  for (var i = 0; i < images.length; i++) {\r\n    var img = images[i];\r\n    opacityC(img,50)();\r\n    img.onmouseover = opacityC(img, 80);\r\n    img.onmouseout = opacityC(img, 50);\r\n    img.onclick = toggleSelectC(img);\r\n  }\r\n<\/pre>\n
Putting this all together, you would have the following HTML and JavaScript:<\/p>\n
\r\n<div id="foo_images">\r\n   <img src="foo.jpg" \/>\r\n   <img src="bar.jpg" \/>\r\n   <img src="baz.jpg" \/>\r\n<\/div>\r\n<script type="text\/javascript" defer><!--\r\n\r\n\/**\r\n * closure to adjust an objects transparency\r\n *\/\r\nfunction opacityC(obj, value) {return function() {\r\n  obj.style.opacity = value\/100;\r\n  obj.style.filter = 'alpha(opacity=' + value + ')';\r\n}}\r\n\r\n\/**\r\n * closure to toggle selected\/non-selected style\r\n *\/\r\nfunction toggleSelectC(obj) {return function() {\r\n  if (obj.selected != 'selected') {\r\n    opacityC(obj, 100)();\r\n    obj.onmouseout = opacityC(obj, 100);\r\n    obj.style.border = '1px solid black';\r\n    obj.selected = 'selected';\r\n  } else {\r\n    opacityC(obj, 50)();\r\n    obj.onmouseout = opacityC(obj, 50);\r\n    obj.style.border = '1px solid white';\r\n    obj.selected = '';\r\n  }\r\n}}\r\n\r\n\/**\r\n * register all selectable images\r\n *\/\r\nfunction registerSelectableImages(obj) {\r\n  var images = obj.getElementsByTagName("img");\r\n  for (var i = 0; i < images.length; i++) {\r\n    var img = images[i];\r\n    opacityC(img,50)();\r\n    img.style.border = '1px solid white';\r\n    img.onmouseover = opacityC(img, 80);\r\n    img.onmouseout = opacityC(img, 50);\r\n    img.onclick = toggleSelectC(img);\r\n  }\r\n}\r\nregisterSelectableImages(document.getElementById('foo_images'));\r\n--><\/script>\r\n<\/pre>\n
Applying the above code to the three sample images will produce the following results:<\/p>\n
\n\"\"\"\"\"\"\n<\/div>\n

<\/p>\n