Metachecker.net
|
TrafficChecker.net
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Dia-Show 2.0 Stretch
[View Sample]
This script will not only add rotating banners/images to your page but also has rotating status bar messages.
Insert into <HEAD>
<script> <!-- Beginning of JavaScript - // CREDITS: // Dia-Show with cute streching-in and squeezing-out effect // by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.ch. // info@24fun.ch // 2/25/2000 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a link to http://www.24fun.ch on the webpage // where this script will be running. // CONFIGURATION: // 1. Create your images (gif or jpg). They should have the same width and height. // Put those images in the same directory as the HTML-file. // You can add as many images as you like. // 2. Copy the script-block and paste it into head-section of your HTML-file. // 3. Copy the style-sheet and paste it into head-section of your HTML-file. // 4. Copy the span with the id "imgcontainer" and paste it into // the body-section of your HTML-file. // 5. Configure the absolute position of your images inside the style-block. // 6. Insert 'onLoad="stretchimage()"' into the body tag. // 7. Configure the varibales below // The width of your images (pixels). All pictures should have the same width. var imgwidth=400 // The height of your images (pixels). All pictures should have the same height. var imgheight=60 // The name of your images. You may add as many images as you like. var imgname=new Array() imgname[0]="imggum1.jpg" imgname[1]="imggum2.jpg" imgname[2]="imggum3.jpg" // Where should those images be linked to? // Add an URL for each image. // If you don't want to add an URL just write '#' instead of // the URL, see sample imgurl[2]. var imgurl=new Array() imgurl[0]="http://www.24fun.ch" imgurl[1]="http://www.24fun.ch" imgurl[2]="#" // This block will preload your images. Do not edit this block. var imgpreload=new Array() for (i=0;i<=imgname.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgname[i] } // Standstill-time between the images (microseconds). var pause=2000 // Speed of the stretching and shrinking effect. More means slower. var speed=20 // This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster. var step=10 // Do not edit the script below var i_loop=0 var i_image=0 function stretchimage() { if (i_loop<=imgwidth) { if (document.all) { imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>" } i_loop=i_loop+step var timer=setTimeout("stretchimage()",speed) } else { i_loop=imgwidth clearTimeout(timer) imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>" var timer=setTimeout("shrinkimage()",pause) } } function shrinkimage() { if (i_loop>=0) { if (document.all) { imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>" } i_loop=i_loop-step var timer=setTimeout("shrinkimage()",speed) } else { i_loop=0 clearTimeout(timer) changeimage() } } function changeimage() { i_image++ if (i_image>=imgname.length) {i_image=0} if (document.layers) { document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>") document.imgcontainer.document.close() } stretchimage() } // - End of JavaScript - --> </script> <style> .containerstyle { position:absolute; left:60px; top:20px; } </style>
Insert into <BODY>
<body onLoad="stretchimage()"> <span id="imgcontainer" class="containerstyle"></span>
Other Options