Entry
How can I fade an img in onmouseover and out onmouseout?
Dec 2nd, 2001 05:02
Martin Honnen,
Here is an example that has been tested with NN6.2 and IE6. It should
work with NN6 and IE5+.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
img opacity
</title>
<style type="text/css">
img { -moz-opacity: 25%; filter: alpha(opacity=25); }
</style>
<script type="text/javascript">
function startFade (element, start, stop, step, delay) {
if (element.filters || element.style && typeof
element.style.MozOpacity != 'undefined') {
element.startOpacity = start;
element.opacity = start;
element.stopOpacity = stop;
element.step = step || (start < stop ? 10 : -10);
element.delay = typeof delay == 'undefined' ? 10 : delay;
element.tid = setTimeout('fade("' + element.id + '")', delay);
}
}
function fade (elementId) {
if (document.all)
var element = document.all[elementId];
else if (document.getElementById)
var element = document.getElementById(elementId);
element.opacity += element.step;
if (element.step > 0 && element.opacity > element.stopOpacity)
element.opacity = element.stopOpacity;
else if (element.step < 0 && element.opacity < element.stopOpacity)
element.opacity = element.stopOpacity;
if (element.filters)
element.filters.alpha.opacity = element.opacity;
else
element.style.MozOpacity = element.opacity + '%';
if (element.step > 0 && element.opacity >= element.stopOpacity)
clearTimeout(element.tid);
else if (element.step < 0 && element.opacity <= element.stopOpacity)
clearTimeout(element.tid);
else
element.tid = setTimeout('fade("'+ element.id + '")',
element.delay);
}
function clearFade (element) {
if (element.tid)
clearTimeout(element.tid);
}
</script>
</head>
<body>
<img id="anImage" src="kiboInside.gif"
onmouseover="startFade(this, 25, 100);"
onmouseout="clearFade(this); startFade(this, this.opacity, 25);"
/>
<img id="a2ndImage" src="buttonon.gif"
onmouseover="startFade(this, 25, 100);"
onmouseout="clearFade(this); startFade(this, this.opacity, 25);"
/>
</body>
</html>
