Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fading background-color on mouseover

    How can this be modified so that the new color fades in and fades out on mouseover?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    	<script type="text/javascript">
    	 <!--//
    	useDhtml=((document.all) || (document.layers))?true:false;
    		function ShowColor(tr, color){if(useDhtml){tr.bgColor=color;}}
    		//-->
    	</script>
    </head>
    
    <body>
    
    <table bgcolor="#577192" style="width: 200px">
    	<tr>
    		<td onmouseover="ShowColor(this,'#718CAD'); this.style.cursor='hand'; return true;" onmouseout="ShowColor(this,'#577192'); return true;" onClick="window.location.href='about.asp'"><a href="about.asp">About</a></td>
    </table>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You could use a for or while loop to make the color go +1 in it's red value, then green, then blue until they are all at the number specified in the destination color (or -1, depending on the case)
    Shawn

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    And by the way:
    useDhtml=((document.all) || (document.layers))?true:false;
    function ShowColor(tr,color){if(useDhtml){tr.bgColor=color;}}
    You don't need to test for IE, there is a cross-browser way to do this.
    replace by this, should work
    function ShowColor(tr,color){tr.style.backgroundColor=color;}

    good luck with your project
    Shawn

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this code out. For some reason it doesn't quite work in Firefox.. something to do with the way it handles hexadecimal math. I've found a cross-browser one, but it doesn't like the colour values you give. It accepts them, but renders them as different colours altogether. I'll post that one in a second once I clean it up, maybe you or someone else can fix it up.

    Here's what works in IE though:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
     <title>Untitled</title>
     <script type="text/javascript">
      <!--//
       /*Background fade by Dave Methvin,
         Windows Magazine
         May be used/modified if credit line is
         retained*/
       var fadeArray = new Array();
       function ShowColor(sobjID, red1, grn1, blu1, red2, grn2, blu2, steps) {
        fadeArray[sobjID] = new Array();
    		
        fadeArray[sobjID]['sred'] = red1;
        fadeArray[sobjID]['sgrn'] = grn1;
        fadeArray[sobjID]['sblu'] = blu1;
    		 
        fadeArray[sobjID]['ered'] = red2;
        fadeArray[sobjID]['egrn'] = grn2;
        fadeArray[sobjID]['eblu'] = blu2;
    		 
        fadeArray[sobjID]['inc'] = steps;
        fadeArray[sobjID]['step'] = 0;
    
        RunFader(sobjID);
       }
    
       function RunFader(sobjID) {
        if(typeof sobjID == 'object') { //IE refers to ID as the object, not the string..
         sobjID = sobjID.attributes.getNamedItem('id').nodeValue;		
        }
    		 
        fadeArray[sobjID]['epct'] = fadeArray[sobjID]['step'] / fadeArray[sobjID]['inc'];
        fadeArray[sobjID]['spct'] = 1 - fadeArray[sobjID]['epct'];
    		 
        document.getElementById(sobjID).bgColor = Math.floor(fadeArray[sobjID]['sred'] * fadeArray[sobjID]['spct'] + fadeArray[sobjID]['ered'] * fadeArray[sobjID]['epct'])*256*256 + Math.floor(fadeArray[sobjID]['sgrn'] * fadeArray[sobjID]['spct'] + fadeArray[sobjID]['egrn'] * fadeArray[sobjID]['epct'])*256 + Math.floor(fadeArray[sobjID]['sblu'] * fadeArray[sobjID]['spct'] + fadeArray[sobjID]['eblu'] * fadeArray[sobjID]['epct']);
        if ( fadeArray[sobjID]['step'] < fadeArray[sobjID]['inc'] ) {
         setTimeout('RunFader('+sobjID+')',10); 
        }
        fadeArray[sobjID]['step']++;
       }
    	 
      //-->
     </script>
    </head>
    
    <body>
    
     <table bgcolor="#577192" style="width: 200px">
      <tr>
       <td name="td_about" id="td_about" onmouseover="ShowColor('td_about', 0x57,0x71,0x92, 0x71,0x8C,0xAD, 64); this.style.cursor='hand'; return true;" onmouseout="ShowColor('td_about', 0x71,0x8C,0xAD, 0x57,0x71,0x92, 64); return true;" onClick="window.location.href='about.asp'"><a href="about.asp">About</a></td>
      </tr>
      <tr>
       <td name="td_next" id="td_next" onmouseover="ShowColor('td_next', 0x57,0x71,0x92, 0x71,0x8C,0xAD, 64); this.style.cursor='hand'; return true;" onmouseout="ShowColor('td_next', 0x71,0x8C,0xAD, 0x57,0x71,0x92, 64); return true;" onClick="window.location.href='about.asp'"><a href="about.asp">About</a></td>
      </tr>
     </table>
    
    </body>
    </html>
    Sadiq.
    Last edited by sad69; 07-05-2004 at 09:26 PM. Reason: Added credit line to script..

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok so here's the version that works in Firefox also, but doesn't work right:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
     <title>Untitled</title>
     <script type="text/javascript">
      <!--//
    
       // set background color to specified descriptors
       function setbgColor(sobjID, red, green, blue) {
        document.getElementById(sobjID).bgColor = "#" + toHex(red) + toHex(green) + toHex(blue);
       }
    
       // fade from start to end descriptors (increase step to increase transition speed)
       function fade(sobjID, i) {
        if(typeof sobjID == 'object') { //IE refers to ID as the object, not the string..
         sobjID = sobjID.attributes.getNamedItem('id').nodeValue;		
        }
    
        // set current red descriptor
        var red = Math.floor(fadeArray[sobjID]['sred'] * ((fadeArray[sobjID]['inc'] - i) / fadeArray[sobjID]['inc']) + fadeArray[sobjID]['ered'] * (i / fadeArray[sobjID]['inc']));
    
        // set current green descriptor
        var green = Math.floor(fadeArray[sobjID]['sgrn'] * ((fadeArray[sobjID]['inc'] - i) / fadeArray[sobjID]['inc']) + fadeArray[sobjID]['egrn'] * (i / fadeArray[sobjID]['inc']));
    
        // set current green descriptor
        var blue = Math.floor(fadeArray[sobjID]['sblu'] * ((fadeArray[sobjID]['inc'] - i) / fadeArray[sobjID]['inc']) + fadeArray[sobjID]['eblu'] * (i / fadeArray[sobjID]['inc']));
    
        // set background color according to descriptors
        setbgColor(sobjID, red, green, blue);
      
        if(i <= fadeArray[sobjID]['inc']) {
         i++;
         fadeArray[sobjID]['timeoutID'] = setTimeout("fade('"+sobjID+"', "+i+");", 50);
        }
       }
    
       var fadeArray = new Array();
       function ShowColor(sobjID, red1, grn1, blu1, red2, grn2, blu2, steps) {
        if(fadeArray[sobjID] && fadeArray[sobjID]['timeoutID'] != -1)
         clearTimeout(fadeArray[sobjID]['timeoutID']);
    
        fadeArray[sobjID] = new Array();
        fadeArray[sobjID]['sred'] = red1;
        fadeArray[sobjID]['sgrn'] = grn1;
        fadeArray[sobjID]['sblu'] = blu1;
        fadeArray[sobjID]['ered'] = red2;
        fadeArray[sobjID]['egrn'] = grn2;
        fadeArray[sobjID]['eblu'] = blu2;
    		 
        fadeArray[sobjID]['inc'] = steps;
        fadeArray[sobjID]['step'] = 0;
    
        fade(sobjID, 0);
       }
    
       function toHex(dec) {
        // create list of hex characters
        var hexCharacters = "0123456789ABCDEF"
     
        // if number is out of range return limit
        if (dec < 0)
         return "00";
        if (dec > 255)
         return "FF";
     
        // decimal equivalent of first hex character in converted number
        var i = Math.floor(dec / 16);
    
        // decimal equivalent of second hex character in converted number
        var j = dec % 16;
    
        // return hexadecimal equivalent
        return hexCharacters.charAt(i) + hexCharacters.charAt(j);
       }
      //-->
     </script>
    </head>
    
    <body>
    
    <table bgcolor="#577192" style="width: 200px">
     <tr>
      <td name="td_about" id="td_about" onmouseover="ShowColor('td_about', 57,71,92, 71,140,173, 10); this.style.cursor='hand'; return true;" onmouseout="ShowColor('td_about', 71,140,173, 57,71,92, 10); return true;" onClick="window.location.href='about.asp'"><a href="about.asp">About</a></td>
     </tr>
     <tr>
      <td name="td_next" id="td_next" onmouseover="ShowColor('td_next', 57,71,92, 71,140,173, 10); this.style.cursor='hand'; return true;" onmouseout="ShowColor('td_next', 71,140,173, 57,71,92, 10); return true;" onClick="window.location.href='about.asp'"><a href="about.asp">About</a></td>
     </tr>
    </table>
    
    </body>
    </html>
    If you do manage to fix it, please post the good version here as it'd be a pretty neat script.

    Right now, it doesn't look like it knows when to stop fading on the mouseout. My guess anyway..

    Sadiq.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    In standard-compliant browsers such as Gecko, :hover and :active pseudo-classes are supported in all elements while in IE they're only supported in anchor elements (links). Fortunately, Vladdy has a fix for that non compliance to CSS2 standards.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    308
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very cool, thanks all.


  •  

    Posting Permissions

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