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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Javascript strobing images

    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



    Code:
    <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>

  • #2
    Regular Coder
    Join Date
    Dec 2005
    Location
    UK
    Posts
    207
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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.

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


  •  

    Posting Permissions

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