Code: Alles auswählen
<style>
.textstyle {
font-family:Arial;
font-size: 9pt;
color:#FFFFFF;
background-color:#AAAAAA;
text-align:center;
}
</style>
<script>
<!-- Beginning of JavaScript -
// CREDITS:
// Free JavaScript slideshow with zoom-in-zoom-out-animation
// by Peter Gehrig
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to http://www.fabulant.com on the webpage
// where this script will be running.
var imgname=new Array()
var imglink=new Array()
var message=new Array()
// URL of images
imgname[0]="imgzoom1_114.jpg"
imgname[1]="imgzoom2_114.jpg"
imgname[2]="imgzoom3_114.jpg"
// Links corresponding to the images above
imglink[0]="http://www.fabulant.com"
imglink[1]="http://www.fabulant.com"
imglink[2]="http:/www.fabulant.com"
// Messages corresponding to the images above
message[0]="My beach is my life"
message[1]="Welcome to my island"
message[2]="Flower power is anywhere"
// Width of images (pixels)
var imgwidth=256
// Height of images (pixels)
var imgheight=164
// Height of textbox (pixels)
var textheight=17
// Pause between the pictures (higher value = higher pause)
var pause=2000
// DO NOT EDIT BELOW THIS LINE ////////////////////////////////////////////
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
var pause=2000
var speed=20
var step=20
var i_loop=0
var i_image=0
var pos_left=0
var pos_top=0
function stretchimage() {
if (i_loop<=imgwidth) {
imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+imgwidth+"' src='"+imgname[i_image]+"' border='0'></a>"
textcontainer.innerHTML=message[i_image]
textcontainer.style.visibility="visible"
var timer=setTimeout("shrinkimage()",pause)
}
}
function shrinkimage() {
if (i_loop>-step) {
textcontainer.style.visibility="hidden"
imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_loop=0
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("stretchimage()",pause)
}
function initiate() {
document.getElementById('imgcontainer').style.left=pos_left
document.getElementById('imgcontainer').style.top=pos_top
changeimage()
}
document.write('<div id="roof" style="position:relative;width:'+imgwidth+';height:'+imgheight+'">')
document.write('<div id="imgcontainer" style="position:absolute;top:0px;left:0px;width:'+imgwidth+'px;height:'+imgheight+'px"></div>')
document.write('<div id="textcontainer" class="textstyle" style="position:absolute;top:'+imgheight+'px;left:0px;width:'+imgwidth+'px;height:'+textheight+'px;visibility:hidden"></div>')
document.write('</div>')
window.onload=onLoad=stretchimage
// - End of JavaScript - -->
</script>