Blending Image Slide Show
Browsers other than IE4.+ will see the pictures change without the blending effect.
Each picture is a link to the full explanation of the picture
Browsers other than IE4.+ will see the pictures change without the blending effect.
Each picture is a link to the full explanation of the picture
T his is one of the coolest slideshow effects we have ever found. The Consigliere™ takes his hat off to the artist who made this one. Besides being very cool, this is a very highly configurative script that you do need to have more than just a basic copy and paste knowledge to have more than the default three pictures.
W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms with the exception of Netscape4.08 and Netscape7.0 where the following variations were observed.
1) There is no blending effect from image to image
2) Images just change from one to another.
W ith the three pictures all you need to do is change the pictures to your URL's and put your links in at the bottom. And don't forget to add the body onload handler directly into your <BODY> tag also. If you forget, it will not work and you will become extremely frustrated after all the work you just did. If you do not know how to add this, see the below example.
<body bgcolor="#000000" body onLoad="slideit()" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">
A s we said earlier this is a three part copy and paste code. After you go to the site and and copy the script ( Don't forget to copy the "body onload tag" also ) you paste the first part of the script in the <HEAD> section of your document. The second part will get pasted directly into the <BODY> tag ( See above example ) and the last part into the <BODY> section. Once you change all the URL's to yours and you have decided to keep only three pictures thats it. "All Done". If you do want to add more than the default number of pictures just follow the tutorial below.
Reconfigurations other than putting in URL's for links plus more than 3 images
window.onerror=reapply
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="URL to your first or top image"
var image2=new Image()
image2.src="URL to your second image"
var image3=new Image()
image3.src="URL to your third image"
var image4=new Image()
image4.src="URL to your fourth image"
var image5=new Image()
image5.src="URL to your fifth image"
//-->
</script>
<a href="javascript:slidelink()" onMouseover="window.status='Your Message In Status
Bar On Mouseover!';return true" onMouseout="window.status=''">
<img src="URL of your first or top image in the code" name="slide" border=0
style="filter:blendTrans(duration=Number of images)"></a>
<script>
<!--
////change number of images below
var number_of_images=Number of images
//change speed below (in seconds)
var speed=Number of seconds between change
var step=1
var whichimage=1
Slightly further down in the code
if (step
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+Number of images000)
else
setTimeout("slideit()",speed*1000)
At the end of the script
function slidelink(){
if (whichimage==1)
window.location="URL where the picture 1 link will take you"
else if (whichimage==2)
window.location="URL where the picture 2 link will take you"
else if (whichimage==3)
window.location="URL where the picture 3 link will take you"
else if (whichimage==4)
window.location="URL where the picture 4 link will take you"
else if (whichimage==5)
window.location="URL where the picture 5 link will take you"
}
//-->
</script>
WHEW !!!!! This is set for 5 pictures so you have an idea what it will look like
O n a note of warning....Be sure your images are all the same size, if not what will happen is that any text or image will start to move up and down either below the script or above it as the size of the pictures change. Actually there is a very easy and logical explanation for the motion. The space or area either in front of the code or behind the code is a constant. The Distance is always the same. If an image would to change size the constant would have to change to compensate for the distance. If your pictures are not the same size you can optimize them and also put a background (same color as your page) matte under the picture so as to make every one exactly the same pixel size.
A
ou can if you like, go to our explanation of why you should optimize your pictures to get a better understanding of it. These pictures have all been optimized with a black matte under them with exactly the same pixel size. This gives the finished product a much more professional look where the images will not move or your text won't go up and down.
[ Optimize Your Images ]
T
his slideshow effect can also be used with text effects instead of pictures by placing your text on a matte and as the page images transition it will give you the effect of your text messages transitioning from one to another very smoothly. You can see an example of that below if you would like to.
[ Example ]
Y
ou can also get another effect by placing your images on larger mattes and position them in different areas of the matte. This you can see by going to the below link to see this effect.
[ See Example Here ]
A
ll these effects are done with the same script. You don't reconfigure any settings except your URL's themselves. All of these text effects and image inhancements can be found below if you want to use them to inhance your images.
[ Get Enhancements Here ]
I
f you have decided to want more pictures than the default of three the site you copied the code from has excellent instructions to reconfigure it for more than three. If you run into any problems with this feel free to contact us. To add this effect to your pages, just grab the below link and you are there.
[ Get Code Here ]
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
|
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-