Geef een afbeelding op jouw pagina de class "highlight_image", en die afbeelding zal oplichten als er met de muis over heen gegaan wordt. Een html-regel zou er als volgt uit kunnen zien: <p><a href="/"><img src="highlight-image-class.jpg" class="highlight_image" /></a></p>. Plaats het onderstaande javascriptje (zo laag mogelijk) in de body van jouw pagina. Het script heeft valide code en is cross browser.
<script>
var de_css_code = 'img.highlight_image{border:0;-moz-opacity:0.4;' +
'opacity:0.4;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";' +
'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);opacity:.4;-khtml-opacity:0.4;}' +
'img.highlight_image:hover,a:hover img.highlight_image{-moz-opacity:1.0;opacity:1.0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";' +
'filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-khtml-opacity:1.0;}',
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = de_css_code;
} else {
stijl_element.appendChild(document.createTextNode(de_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
</script>