Cycling Banner

JavaScriptSource Staff Nov 12, 2004

The JavaScript Source: Text Effects: Cycling Banner

This script produces a cycling banner that utilizes images. Users can adjust speed or change the images.

Link Man
Link Man
Link Man
Link Man
Link Man

The JavaScript Source: Text Effects: Cycling Banner

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<HEAD>          <style type="text/css">    A:hover {color: darkblue; text-decoration: underline}  A:link {color: blue; text-decoration: none}  A:active {color: blue; text-decoration: none}  A:visited {color: blue; text-decoration: none}    </style>      <script>  // written by Elvin B. Gibson, Jr. (c) 2004//    //Array for your pictures//  // put the # of pictures in ()//  images=new Array(3)    //Array images//    images[0]=new Image;    //put your 1st image name//  images[0].src="welcome.jpg";  images[1]=new Image;    //put your 2nd image name//  images[1].src="imthe.jpg";    //put your 3rd image name//  images[1].src="jss01-big.gif";    //repeat the above process for more images//    //set to zero so the function has starting point//  index = 0;    function banner()  {  document.banner.src = images[index].src;  index++;    //Literal number of images//  if (index==2)  {  //restarts//  index=0;  }    //Time for each picture to run milliseconds//  setTimeout("banner()",1000);  return;  }    </script>  </HEAD>        <BODY onLoad="banner()">              <table cellspacing="0" width="100%" height="100%" border="0"><tr>  <td valign=top width="200px" height="200px">  <img src="leftcorner.jpg">  </td>    <td rowspan="2" width="100%" height="100%">  <center>  <h1 align=center><img src="welcome.jpg" name="banner"></h1>  <table>  <tr>    <td align=center width="97px" height="200px">  <table align=center background="cellbackground.jpg" width="98px" height="200px"><td align=center>  <a href="#"  onMouseOver="document.mainpic.src='ball.jpg'"  onMouseOut="document.mainpic.src='butterfly.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='spider.jpg'"  onMouseOut="document.mainpic.src='rabbit.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='butterfly.jpg'"  onMouseOut="document.mainpic.src='ball.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='rabbit.jpg'"  onMouseOut="document.mainpic.src='spider.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='butterfly.jpg'"  onMouseOut="document.mainpic.src='spider.jpg'";>Link Man</a><br>    </td>  </table>  </td>      <td align=center width="295px" background="mainback.jpg" height="450px">  <img src="jss01-big.gif" name="mainpic">  </td>    <td align=center width="97px" height="200px">  <table align=center background="cellbackground.jpg" width="98px" height="200px"><td align=center>  <a href="#"  onMouseOver="document.mainpic.src='spider.jpg'"  onMouseOut="document.mainpic.src='butterfly.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='rabbit.jpg'"  onMouseOut="document.mainpic.src='ball.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='spider.jpg'"  onMouseOut="document.mainpic.src='butterfly.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='ball.jpg'"  onMouseOut="document.mainpic.src='rabbit.jpg'";>Link Man</a><br>    <a href="#"  onMouseOver="document.mainpic.src='butterfly.jpg'"  onMouseOut="document.mainpic.src='spider.jpg'";>Link Man</a><br>    </td>  </table>    </td>  </tr>    <tr>  <td align=center colspan="3">  <br><br><br>  -=*Welcome*=-<br> Please ignore all text, just something to place in the webpage<br>This Javascript is very editable, have fun!<br>Have a good day :)!  </td>    </tr>  </table>  </center>    </td>    <td align=center>     </td>    </tr>    <tr>  <td>  </td>    <td valign=bottom>  <img src="rightcorner.jpg">  </td>  </tr>  </table>    <p><center>  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>  </center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Cycling Banner

Leave a Response

Attention JavaScript Coders

Go Deeper