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
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Why not just use two images or a two part image?
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  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