JavaScript
Browserunabhängige SlideShow mit Links
Wenn eine Bilder-Rotation mit Fading-Effekt (und Links) browserübergreifend vernünftig funktionieren soll, dann ist JavaScript nötig.
Es gibt für diesen Zweck zahlreiche kostenlose Scripts. Hier stellen wir unseres ebenfalls zur Verfügung.
Wenn Sie Kommentare oder Verbesserungsvorschläge haben, nehmen Sie bitte Kontakt mit uns auf.
Slide-Show Demo
Bedingungen:
Die SlideShow muss in einem absolut positioniertem Layer benutzt werden.
Installation:
Platzieren Sie einen Layer auf Ihrer Website. In diesem wird die Slide-Show laufen.
Kopieren Sie dafür diesen Code und passen Sie die Werte "width" und "height" Ihrem Bildformat an:
<style TYPE="text/css">
<!--
.slideShowBox {
width:248px;
height:111px;
}
!-->
</style>
<div id="slideshow" class="slideShowBox" style="border: 1px solid #000080; position: absolute; left: 32px; top: 26px; z-index: 2;">
<div class="slideShowBox" style="margin: 0px; padding: 0px; background-repeat: no-repeat; opacity: 0.0;" id="blenddiv">
</div>
<div style="position: absolute; left: 0px; top: 0px; width: 248px; height: 110px;">
<a href="" id="bildLink">
<img class="slideShowBox" style="opacity: 0;visibility:hidden;border:0px" src=""; filter="alpha(opacity=0);" id="blendimage" alt="" >
</a>
</div>
</div>
Danach fügen Sie folgendes Script in den <head>-Bereich Ihrer Website ein.
Die Arrays "Pic" und "Url" können Sie verwenden, um die zu rotierenden Bilder bzw. die entsprechenden Links festzulegen.
Mit "slideShowSpeed" ändern Sie die Zeitabstände zwischen den Bildern, während "fadingTime" die Zeitspanne des Fade-Effekts bestimmt. Beide Werte werden in Millisekunden angegeben.
<script language="javascript" type="text/javascript">
<!--
function blendimage(divid, imageid, imagefile, millisec)
{
var speed = Math.round(millisec / 100);
var timer = 0;
if (blendBild)
{
document.getElementById(imageid).src = imagefile;
}
else
{
document.getElementById(divid).style.backgroundImage = "url(" + imagefile + ")";
}
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpacBlend(" + i + ",'" + imageid + "', '" + divid+"')",(timer * speed));
timer++;
}
}
function changeOpacBlend(opacity, imageid, divid)
{
if (blendBild)
{
changeOpac(opacity, imageid);
changeOpac(100-opacity, divid);
}
else
{
changeOpac(100-opacity, imageid);
changeOpac(opacity, divid);
}
if (opacity == 100)
{
setTimeout("runSlideShow()", slideShowSpeed);
blendBild = !blendBild;
}
document.getElementById(imageid).style.visibility = 'visible';
}
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
var slideShowSpeed = 4500;
var fadingTime = 4000;
var Pic = new Array();
var Url = new Array();
Pic[0] = 'images/sliderMScert.jpg';
Pic[1] = 'images/sliderStartseite.jpg';
Pic[2] = 'images/sliderAbout.jpg';
Url[0] ='http://www.microsoft.de';
Url[1] = 'http://www.grosshaus-gmbh.de';
Url[2] = 'http://www.grosshaus-gmbh.de/Kontakt.aspx';
var bildIdx = 0;
var p = Pic.length;
var preLoad = new Array();
var preLoad2 = new Array();
var blendBild = true;
for (i = 0; i < p; i++)
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
preLoad2[i] = new String();
preLoad2[i].href = Url[i];
}
function runSlideShow()
{
document.getElementById('bildLink').href = preLoad2[bildIdx].href;
blendimage('blenddiv', 'blendimage', preLoad[bildIdx].src, fadingTime);
bildIdx = bildIdx + 1;
if (bildIdx > (p - 1)) bildIdx = 0;
}
//-->
</script>
Anschließend lassen Sie das Script starten, indem Sie "runSlideShow()" im <body onload> aufrufen:
<body onload="runSlideShow()">