www.webdeveloper.com
Results 1 to 5 of 5

Thread: help with image fade

  1. #1
    Join Date
    Nov 2005
    Posts
    55

    Question help with image fade

    i know that this is kind of a java question..but i have a CSS and i cant get my image fade to work.....the only way that i can get it to fade is to put the CSS in there...but i dont know what to put im my CSS and if i take it out then my image will not fade...someone please help!!!
    here is my code
    PHP Code:
    <head>
    <
    style type="text/css">
    #im {
    FILTERalpha(opacity=60)
    }
    </
    style>

    <
    script language="JavaScript1.2">
    function 
    high(which2)
    {
    theobject=which2;
    highlighting=setInterval("highlightit(theobject)",60);

    }
    function 
    low(which2)
    {
    clearInterval(highlighting);
    which2.filters.alpha.opacity=60;
    }
    function 
    highlightit(cur2)
    {
    if(
    cur2.filters.alpha.opacity<250)
    cur2.filters.alpha.opacity+=9
    else if(window.highlighting)
    clearInterval(highlighting)
    }
    </script>

    </head>
    <body>

    <a href="mypics.html"><img id="im" onmouseover="high(this)" onmouseout="low(this)" style="border: 2px solid #000080;" src="katie.jpg" width="140" height="108""></a>
    </body> 

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    FYI - It's best to fade your images using image-editing software. Not every browser will implement the fade coding.

    KDLA

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Why not just use two images or a two part image?

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746

    or a non-js approach

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    </head>
    <style type="text/css">
    a.linkopacity img {
    filter:alpha(opacity=65);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    
    a.linkopacity:hover img {
    filter:alpha(opacity=100);   
    -moz-opacity: 1.0;   
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>
    <body>
    <a class="linkopacity" href="#nogo"><img src="images/name.jpg" alt="this picture" width="100" height="100" /></a>
    </body>
    </html>
    Should make fade/brighten w/out any *js. Here I have the image hyperlinked, but one could do this for just 'on hover'.
    -Joel

  5. #5
    Join Date
    Nov 2005
    Posts
    55
    Thanks WebJoel, i couldnt figure out what to put in the Js file so this works great

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles