« »

Enhanced double-gum-effect made for banner-rotations or diashows. Each image or banner can be linked to a different Website. Netscape-users will see a simple image-rotation-effect. Why? Unfortunately Netscape Navigator is too slow to create a smooth movement.

Label: Dia-Show, 2.0, double gum, gum, banner rotation, banner, rotation, Netscape

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT>
<!-- Beginning of JavaScript -
// Dia-Show 2.0: double-gum-effect

// 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 span-blocks with the id "imgcontainer1" and "imgcontainer2". 
//		Paste them into the body-section of your HTML-file.
// 4.	Insert 'onLoad="initiate()"' into the body tag.
// 5.	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=90

// The horizontal and vertical position of the images (pixels). 
var pos_left=20
var pos_top=20

// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="logojs.gif"
imgname[2]="logojs.gif"
imgname[3]="logojs.gif"

// 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://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
imgurl[3]="http://javascriptbank.com"

// 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_image1=0
var i_image2=1


function stretchimage() {
	if (i_loop<=imgwidth) {
		if (document.all) {
			imgcontainer1.innerHTML="<a href='"+imgurl[i_image1]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image1]+"' border='0'></a>"
			document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
			
			imgcontainer2.innerHTML="<a href='"+imgurl[i_image2]+"' target='_blank'><img width='"+(imgwidth-i_loop)+"' height='"+imgheight+"' src='"+imgname[i_image2]+"' border='0'></a>"
		}
		i_loop=i_loop+step
		var timer=setTimeout("stretchimage()",speed)
  	}
	else {
		clearTimeout(timer)
		changeimage()
	}
}

function changeimage() {
	i_loop=0
	i_image1++
	if (i_image1>imgname.length-1) {i_image1=0}
	i_image2=i_image1-1
	if (i_image2>imgname.length-1) {i_image2=0}
	if (i_image2<0) {i_image2=imgname.length-1}
	
	document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
   	var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
	if (document.all) {
		document.all.imgcontainer1.style.posLeft=pos_left
		document.all.imgcontainer2.style.posLeft=pos_left
		document.all.imgcontainer1.style.posTop=pos_top
		document.all.imgcontainer2.style.posTop=pos_top
		changeimage()
	}
	if (document.layers) {
		document.imgcontainer1.left=pos_left
		document.imgcontainer2.left=pos_left
		document.imgcontainer1.top=pos_top
		document.imgcontainer2.top=pos_top
		rotatenetscape()
	}
}

function rotatenetscape() {
	document.imgcontainer1.document.write("<a href='"+imgurl[i_image1]+"' target='_blank'><img src='"+imgname[i_image1]+"' border='0'></a>")	
	document.imgcontainer1.document.close()	
	i_image1++
	if (i_image1>imgname.length-1) {i_image1=0}
   	var timer=setTimeout("rotatenetscape()",pause*2)
}

// - End of JavaScript - -->
</SCRIPT>

Copy All x2

<BODY onload=initiate()>
<SPAN id=imgcontainer1 style="POSITION: relative"></SPAN>

<SPAN id=imgcontainer2 style="POSITION: relative"></SPAN>
</BODY>

Comment (0)
Write

by Preview

Write your comment

Comments of Guest will be previwed

Your name *
Your email *
Your site

Title

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

29/01/2007
Peter Gehrig [more]
2,483
0
53
0
5.96 KBytes

baviet2510[2] chuotxxx

Let's be first member to do this

Top Web Hosting Reviews

JavaScript by day

Links

Free Joomla templates

onMouseOver slideshow popup Corner calendar Transition Drag frame redirect file editor open validation search rich MARQUEE banner menu tab clipboard Internet snake Remember checkbox md5 java load css form prototype

Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web

Dia-Show 2.0 with double gum

Label: Dia-Show, 2.0, double gum, gum, banner rotation, banner, rotation, Netscape google_ad_client = "pub-8741228267140329"; google_ad_slot = "2932770500"; google_ad_width = 468; google_ad_height = 15;

Write your comment

JavaScript by day

Links

Label: Dia-Show, 2.0, double gum, gum, banner rotation, banner, rotation, Netscape