logo

Animated Images (javascript)

JavaScript: The Definitive Guide

I wrote the animated images to provide an cycling advertisement of images with corresponding links to amazon from a web page. The animated images code uses a timer to cycle every two seconds through an image.

<input type=button name=cmdLink value="Demo" OnClick="location.href='http://www.listensoftware.com/animated_images.html'"> <pre> <html><head><title>Javascript Rotation</title> <script language="javascript1.1"> var frames; images=new Array(5); links=new Array(5); images[0]=new Image(); images[0].src="http://www.listensoftware.com/3ds_1.gif"; images[1]=new Image(); images[1].src="http://www.listensoftware.com/3ds_2.gif"; images[2]=new Image(); images[2].src="http://www.listensoftware.com/3dsbible.jpg"; images[3]=new Image(); images[3].src="http://www.listensoftware.com/3dsfundamentals.gif"; images[4]=new Image(); images[4].src="http://www.listensoftware.com/dreamweaver.jpg"; links[0]=new String(); links[0].value="http://www.amazon.com/exec/obidos/ISBN=1562054198/listensoftwareso/"; links[1]=new String(); links[1].value="http://www.amazon.com/exec/obidos/ISBN=1562058576/listensoftwareso/"; links[2]=new String(); links[2].value="http://www.amazon.com/exec/obidos/ISBN=076454621X/listensoftwareso/"; links[3]=new String(); links[3].value="http://www.amazon.com/exec/obidos/ISBN=0735700494/listensoftwareso/"; links[4]=new String(); links[4].value="http://www.amazon.com/exec/obidos/ISBN=B00004GP3J/listensoftwareso/"; frames=0; function animateImages() { document.image_placeholder.src=images[frames].src; book_link.href=links[frames].value; frames=(frames+1)%5; timeout_id=setTimeout("animateImages()",2000); } </script> </head> <body bgcolor="white" onLoad="animateImages();"> <a href="javascript:0" name="book_link"> <img src="http://www.listensoftware.com/3ds_1.gif" name="image_placeholder" border="0"></a> </body> </html>
s