Image opacity and

Discussion in 'Javascript' started by mhoeneveld, May 2, 2006.

  1. mhoeneveld

    mhoeneveld Guest

    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)"
    ><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>
     
    mhoeneveld, May 2, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DU
    Replies:
    13
    Views:
    944
  2. Replies:
    1
    Views:
    437
    Adrienne Boswell
    May 25, 2007
  3. Replies:
    0
    Views:
    630
  4. Dean Edwards

    reading image opacity

    Dean Edwards, Sep 16, 2003, in forum: Javascript
    Replies:
    1
    Views:
    72
    Vjekoslav Begovic
    Sep 17, 2003
  5. mhoeneveld

    Image opacity flicker and getElementById

    mhoeneveld, May 2, 2006, in forum: Javascript
    Replies:
    1
    Views:
    129
    Stephen Chalmers
    May 3, 2006
Loading...

Share This Page