...

View Full Version : Javascript strobing images



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>

many_tentacles
05-26-2006, 01:54 PM
i've scraped together something that works... if anyone is interested.

I'm sure it could be made a lot more tidy but i'll look at that later.


<html>
<head>
<title>alternating image effect</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<script type='text/javascript'>
var photoNum = Array('0', '1');

var frame_strobe = 0;

function strobe(x)
{
frame_strobe = (frame_strobe == 1) ? 0 : frame_strobe + 1;

document.images["photo"].src = "http://home.socal.rr.com/salt65/golf" + photoNum[frame_strobe] + ".jpg";
return true;
}

function alternate(image, toggle)
{

for (id = 0; image != document.images[id]; id++);

if (toggle)
{

cycle = setInterval('strobe(id)', 20);
}
else
{

clearInterval(cycle);

document.images["photo"].src = "http://home.socal.rr.com/salt65/golf" + photoNum[0] + ".jpg";
}

return true;
}
</script>

</head>

<body>


<img body onmouseover="alternate(this, 1);" onMouseOut="alternate(this, 0);" src="http://home.socal.rr.com/salt65/golf0.jpg" alt="Alternating pictures" id="photo">

</body>

</html>

obviously for this to work the image needs to be called "golfx.jpg" so you can't use the same code for various differnet rollovers... thats what i'm looking to do now.

If you beat me to the solution, please post it here.

I might actually be getting my head around javascript eventually!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum