467,212 Members | 1,080 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,212 developers. It's quick & easy.

Image opacity flicker and getElementById

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
mh********@zonnet.nl

<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)"
<CENTER>

<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>

May 2 '06 #1
  • viewed: 2354
Share:
1 Reply

mhoeneveld wrote:
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.


Actually, I think the cause is that hovering the links is triggering
mouseout events for the table cell. You could re-code the function so
that once a transition has started, it cannot be halted.

--
S.C.

May 3 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Bryan | last post: by
6 posts views Thread by jesper_lofgren@yahoo.se | last post: by
16 posts views Thread by Darko | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.