|
Fading Foto's
Leuk Scripje Waarbij een Foto Steeds Zichtbaarde word
Zelf de Foto's Veranderen
<html>
<head>
<TITLE>ani_background</TITLE>
<meta NAME="keywords" CONTENT="animation, background, DHTML, image, gif, ">
<meta NAME="description" CONTENT="javascript, dynamisch, background, script">
<style>
H1 {
font-size : 20;
font-family : Times;
color : 444444;
}
A {
text-decoration: underline;
color : 444444;
}
A:Visited {
text-decoration: underline;
color : 444444;
}
A:Hover{
text-decoration: none;
font-family : Times;
color : FF0000;
}
A:Active {
text-decoration: underline;
color : 444444;
}
</style>
</head>
<script language=javaScript>
<!-- Beginning of JavaScript -
img0 = new Image();
img0.src = "girl.jpg";
img1 = new Image();
img1.src = "lippen.jpg";
img2 = new Image();
img2.src = "augen.jpg";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="girl.jpg"
imageurl[1] ="lippen.jpg"
imageurl[2] ="augen.jpg"
function showimage() {
if(document.all) {
if (i_strngth <=80) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+3
var timer=setTimeout("showimage()",400)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-3) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-4
var timer=setTimeout("hideimage()",400)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
// - End of JavaScript - -->
</script>
<body bgcolor="#000000" onLoad="showimage()" text="#00FF00" link="#FF9933" vlink="#FFFF00">
<div align="center">
<center>
<table border="1" bordercolor="#00FF00" width="55%">
<tr>
<td> </td>
<div id="testimage" style="position: absolute; visibility: visible; top: 82; left: 63; width: 632; height: 207">
</tr>
</table>
</center>
</div>
</body>
</html>
download het script
Zie hier een demo van het script
Reacties van leden
|
