This clever bit of Javascript allows a series of equally sized images to 'blend' between displays, the timing of which can be altered easily. Each image can be hyperlinked individually. It looks something like this:
Place the following in the <HEAD> section of your webpage, remember to alter the image array to reflect your own graphics names! You can also have each graphic hyperlink to another part of your site, or an external site.
Other variables include the slidespeed command which is set at 3000 mili-seconds (3 seconds) at the moment (see line 4). Also you have set the link to open in a new window if you want (1=yes, 0=no, see line 10).
<script language="JavaScript1.1">
<!--
//specify interval between slide (in mili-seconds - must be whole number, i.e. 3000, 4000 etc)
var slidespeed=3000
//specify images
var slideimages=new Array("image1.gif","image2.gif","image3.gif")
//specify corresponding links
var slidelinks=new Array("http://www.dynamicdrive.com","http://javascriptkit.com","
http://tacticalpanda.freewebspace.com")
var newwindow=1 //open links in new window? 1=yes, 0=no
var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}
//-->
</script>
Now place the following in the <BODY> section of your page where you want the script to appear:
<a href="javascript:gotoshow()" onfocus="this.blur()"><img src="image1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width="56" height="56"></a>
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()
//-->
</script>
You must alter the blend.trans to reflect the same speed as in the <HEAD> section if you have altered it (3000 mili-seconds or 3 seconds)
Finally, ensure that the first image in your list of graphics reflects the first image in the <HEAD> section (image1.gif), and the image size is shown.
 My thanks to our friends at Dynamic Drive for this brilliant script.
How about a really good animated opening window script? Click here!
Top
[1] [2] [3] [4] [5] [6] [7] [8]
<<< Previous page
| 
