Pixelating Slide Show IE 5.5+ will see pixel changes while others will see just transitions. This is your regular hyperlinked image slideshow, except in IE5.5 that is. Thanks to new multimedia effects introduced in the browser, the participating images are "pixelated" into view in IE5.5. A great cross browser script with a discriminating zest

T his is your regular hyperlinked image slideshow, except in IE5.5 that is. Thanks to new multimedia effects introduced in the browser, the participating images are "pixelated" into view in IE5.5. A great cross browser script with a discriminating zest.

W e have tested the code in IE5.5, IE6.0, Firefox1.0, Opera7.54u2 and Netscape7.02. This script only has the pixelating effect in IE5.5 and higher. In all other platforms you will just see the images change.

I f you have IE5.5+ you will see the change with the pixels. All other browsers will just see the transitions.

D epending on your knowledge of HTML and Java scripts this is an easy 2 part copy and paste code. One part gets pasted in the <HEAD> section of your document and the other part gets pasted in the <BODY> section where ever you want the images to appear in your document.

B elow are where you need to make your reconfigurations for your images and links.

F irst you will see the default part of the code where to reconfigure and below that will be our reconfigurations as to where and what to reconfigure. As you will notice the default has three images and we have four. You can add or subtract as many as you need.

Y ou will also notice that all of the images are the same size. There are two reasons for this. The first is self evident being that it looks so much more professional if your pictures transition perfectly and don't jump around like you just threw the code together and really did not care about cosmetics.

s econdly the image sizes are a constant. If they would be of different sizes the text around it would start to move up and down to handle the constant (the images).

A t the bottom of the page we have also supplied a link to an adobe graphic editing program that is extremely handy when dealing with images. You can optimize them for fastest loading speed and also alter the size of your images still constraining the proportions so the look perfect and not out of proportion. If you have any problems with this feel free to contact us.

Reconfigurations

Default Part Of Code In <HEAD> Section

//specify interval between slide (in mili seconds)
var slidespeed=3000
//specify images
var slideimages=new Array("photo1.jpg","photo2.jpg","photo3.jpg")
//specify corresponding links
var slidelinks=new Array
("http://www.dynamicdrive.com","http://wsabstract.com","http://www.geocities.com")

End Of Default In <HEAD> Section

Default Part Of Code In <BODY> Section

End Of Default Part Of Code In <BODY> Section

Start Of Reconfigurations Part Of Code In <HEAD> Section

//specify interval between slide (in mili seconds)
var slidespeed=4000
//specify images
var slideimages=new Array
("https://www.angelfire.com/ny5/consigliere/plane1.jpg",
"https://www.angelfire.com/ny5/consigliere/plane2.jpg",
"https://www.angelfire.com/ny5/consigliere/plane3.jpg",
"https://www.angelfire.com/ny5/consigliere/plane4.jpg")
//specify corresponding links
var slidelinks=new Array
("https://www.angelfire.com/ny5/consigliere/b2.html",
"https://www.angelfire.com/ny5/consigliere/f15.html",
"https://www.angelfire.com/ny5/consigliere/su27.html",
"https://www.angelfire.com/ny5/consigliere/jet1.html")

End Of Reconfigurations Part Of Code In <HEAD> Section

Start Of Reconfigurations Part Of Code In <BODY> Section

End Of Reconfigurations Part Of Code In <BODY> Section

Y ou will notice in the default code that it did not have complete URL codes for the path to the images. You have to have complete URL codes as shown in the reconfigurations. You will also notice that in the body section you only have one URL for image one. If you compare the <HEAD> and the <BODY> sections of the code you will notice that image one is the first image in either part of the code. This will be the image that will appear first on your page. Also you need to match images with links. In other words image one will go to link one, image two will go to link two and so on and so forth. This is so when you click on the image it will take you to the proper page.

[ Adobe Graphic Editor ]
[ Get Code Here ]