By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,866 Members | 1,660 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,866 IT Pros & Developers. It's quick & easy.

Image opacity flicker and getElementById

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a

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.