many_tentacles
05-25-2006, 11:27 PM
Hi
I found this code on the forum archive that causes a text link to strobe rainbow colors when you rollover it.
I want to adapt this code so that it is an image rather than text and when you rollover it, the image strobes through a series of images. then when you rollout, it returns to its original image.
I'm sure there's a simple way to do this.
If anyone could help me work it out, that would be great.
Thanks
<html><head>
<title>Strobe</title>
<script type='text/javascript'>
<!--
// JavaScript code to produce strobing rainbow-colored links
// on mouseovers. Coded by Timothy Boronczyk, © 2003.
// declare list of colors as a global array (goldenrod used
// because yellow was too difficult to against lighter
// backgrounds)
var colors = Array('red', 'orange', 'goldenrod', 'green',
'blue', 'purple');
// declare color pointer (current color in array by position)
var p_color = 0;
function strobe(x)
{
// set pointer to next color (reset pointer to beginning
// if current position is at the end of the list)
p_color = (p_color == 5) ? 0 : p_color + 1;
// set link color
document.links[x].style.Color = colors[p_color];
return true; // no errors
}
function rainbow(link, toggle)
{
// determine which link called this function by matching
// the current key of the DOM's link array
for (id = 0; link != document.links[id]; id++);
if (toggle)
{
// identify setInterval function by name cycle and
// repeatedly call change_color passing current link
// array key
cycle = setInterval('strobe(id)', 100);
}
else
{
// terminate cycle calls
clearInterval(cycle);
// reset link color (assuming that green was original
// color)
link.style.Color = 'green';
}
return true; // no errors
}
//-->
</script>
</head>
<body>
<a href='#' onmouseover="rainbow(this, 1);"
onmouseout="rainbow(this, 0);">dsadsasdasd</a>
</body></html>
I found this code on the forum archive that causes a text link to strobe rainbow colors when you rollover it.
I want to adapt this code so that it is an image rather than text and when you rollover it, the image strobes through a series of images. then when you rollout, it returns to its original image.
I'm sure there's a simple way to do this.
If anyone could help me work it out, that would be great.
Thanks
<html><head>
<title>Strobe</title>
<script type='text/javascript'>
<!--
// JavaScript code to produce strobing rainbow-colored links
// on mouseovers. Coded by Timothy Boronczyk, © 2003.
// declare list of colors as a global array (goldenrod used
// because yellow was too difficult to against lighter
// backgrounds)
var colors = Array('red', 'orange', 'goldenrod', 'green',
'blue', 'purple');
// declare color pointer (current color in array by position)
var p_color = 0;
function strobe(x)
{
// set pointer to next color (reset pointer to beginning
// if current position is at the end of the list)
p_color = (p_color == 5) ? 0 : p_color + 1;
// set link color
document.links[x].style.Color = colors[p_color];
return true; // no errors
}
function rainbow(link, toggle)
{
// determine which link called this function by matching
// the current key of the DOM's link array
for (id = 0; link != document.links[id]; id++);
if (toggle)
{
// identify setInterval function by name cycle and
// repeatedly call change_color passing current link
// array key
cycle = setInterval('strobe(id)', 100);
}
else
{
// terminate cycle calls
clearInterval(cycle);
// reset link color (assuming that green was original
// color)
link.style.Color = 'green';
}
return true; // no errors
}
//-->
</script>
</head>
<body>
<a href='#' onmouseover="rainbow(this, 1);"
onmouseout="rainbow(this, 0);">dsadsasdasd</a>
</body></html>