M
mhoeneveld
I am writing a small script to fade the opacity of an image/object.
The script itself works fine only I do have some unwanted behaviour.
I do use a tablecell object and the mouseover/mouseout to activate the
script.
In the same cell are some links listed and when you move the cursor
over the links the image starts to flicker. This is because of the
getElementById that identifies each link as an object.
Anyone knows how I can solve this behaviour?
(Below is the sourcecode I use)
Thanks a lot for your help in advance.
Maurice Hoeneveld
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript1.2">
<!--
function opacity(id, opacStart, opacEnd, milisec) {
// speed for each frame
var speed = Math.round(milisec / 100 );
var timer = 0;
// determine the direction for the blending, if start and end are the
same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
// change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#AAAAAA>
<CENTER>
<TABLE BORDER=0 WITH=800>
<TR>
<TD WIDTH=200 VALIGN=top id="image1"
STYLE="filter:alpha(opacity=50);-moz-opacity:0.5"
onMouseover="opacity('image1',50,100,2000)"
onMouseout="opacity('image1',100,50,2000)"
<A HREF="link1.html" TARGET=_BLANK>link1<BR>
<A HREF="link2.html" TARGET=_BLANK>link2<BR>
<A HREF="link3.html" TARGET=_BLANK>link3<BR>
<A HREF="link4.html" TARGET=_BLANK>link4<BR>
<A HREF="link5.html" TARGET=_BLANK>link5<BR>
<A HREF="link6.html" TARGET=_BLANK>link6<BR>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
The script itself works fine only I do have some unwanted behaviour.
I do use a tablecell object and the mouseover/mouseout to activate the
script.
In the same cell are some links listed and when you move the cursor
over the links the image starts to flicker. This is because of the
getElementById that identifies each link as an object.
Anyone knows how I can solve this behaviour?
(Below is the sourcecode I use)
Thanks a lot for your help in advance.
Maurice Hoeneveld
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript1.2">
<!--
function opacity(id, opacStart, opacEnd, milisec) {
// speed for each frame
var speed = Math.round(milisec / 100 );
var timer = 0;
// determine the direction for the blending, if start and end are the
same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
// change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#AAAAAA>
<CENTER>
<TABLE BORDER=0 WITH=800>
<TR>
<TD WIDTH=200 VALIGN=top id="image1"
STYLE="filter:alpha(opacity=50);-moz-opacity:0.5"
onMouseover="opacity('image1',50,100,2000)"
onMouseout="opacity('image1',100,50,2000)"
<IMG SRC="image1.jpg" width=200 height=150 BORDER=0><BR>
<A HREF="link1.html" TARGET=_BLANK>link1<BR>
<A HREF="link2.html" TARGET=_BLANK>link2<BR>
<A HREF="link3.html" TARGET=_BLANK>link3<BR>
<A HREF="link4.html" TARGET=_BLANK>link4<BR>
<A HREF="link5.html" TARGET=_BLANK>link5<BR>
<A HREF="link6.html" TARGET=_BLANK>link6<BR>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>