...

View Full Version : Fading background-color on mouseover



AshleyQuick
07-05-2004, 03:35 PM
How can this be modified so that the new color fades in and fades out on mouseover?


<!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>

shlagish
07-05-2004, 08:25 PM
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)

shlagish
07-05-2004, 08:28 PM
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 :thumbsup:

sad69
07-05-2004, 09:22 PM
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:


<!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.

sad69
07-05-2004, 10:17 PM
Ok so here's the version that works in Firefox also, but doesn't work right:


<!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.

glenngv
07-06-2004, 04:54 AM
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 (http://www.vladdy.net/Demos/IEPseudoClassesFix.html) for that non compliance to CSS2 standards.

AshleyQuick
07-06-2004, 02:25 PM
Very cool, thanks all. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum