Want a Rotating Banner Or Button? Here is How to Get One.

I was looking for code to have a button that rotated images and corresponding links, not every 5 seconds or so, but when someone refreshes a page on my site, or when they visit another page on the site.  Similar to the Google adwords to the right.
I found the code, and with some tweaking you can have this on your site too.  First, you need to be somewhat comfortable with editing HTML.  If you look at HTML or script coding and it looks completely foreign, then I would suggest playing with this some before making it live on your site; or get someone with the know how to help you.  :-)
If you would like to see this code in action, please check out my 'Blog Hops I Participate In' section on my left sidebar.  Go to another page on this site, how about the Blog Hops Page and you will see that the button is different.  (Yes, I made it open another window, don't want you going too far)
OK - first is an image of the code,  with the editable parts in red, other editable parts in blue, but they are not necessary to make the script work.  Height & Width can be used if you want to control how the images look on your page (eg. I limited mine to 150x150), and the Alt & Title text is a good SEO improvement practice. Make the last two reflect what the place holder is, not what each image is (eg. I put alt="blog hop" and title="link up parties"),  The green text is instructions, and can be removed from the coding.

Don't worry, I will include a text box with the code in it for you to copy and paste, I just wanted to give you a graphical reference of what is changeable in the code.  Do not change the black text, just the colors as represented above.  If you have a lot of images (for example, the one I am using to the left has 29 images) I would suggest editing in 'Note Pad' (or the Apple Text editor) fully maximized so you can easily see any mistakes (I had a few I didn't see until I did that).
Other ways to use this is to rotate sponsor banners on one spot. :-)  I plan on using it for that reason too, I just need to work on the code.
If you have any question, or have another idea of how to use this script, please don't hesitate to leave a comment.  And with out further chatting, here is the code for you to copy and paste:
<script language="JavaScript"> function random_imglink(){ var myimages=new Array() //specify random images below. You can have as many as you wish myimages[1]="http://www.mysite.com/myimage1.jpg" myimages[2]="http://www.mysite.com/myimage2.jpg" myimages[3]="http://www.mysite.com/myimage3.jpg" //specify corresponding links below var imagelinks=new Array() imagelinks[1]="http://www.link1.com" imagelinks[2]="http://www.link2.com" imagelinks[3]="http://www.link3.com" var ry=Math.floor(Math.random()*myimages.length) if (ry==0) ry=1 document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>') } //--> </script> <script language="javascript"> random_imglink() </script>

If you like this post, don't forget to share it below.

Don't miss a single post, subscribe via e-mail now. Enter your email address:
Delivered by FeedBurner