derwunner
Mitglied
Hallo,
ich bin schon langsam etwas am verzweifeln.
Also was ich brauche ist ein Script, dass Bilder auf der gleichen Stelle ein- und ausblendet. Also eine Art Slideshow auf der gleichen Stelle. Je nach Bild soll der Link auf eine andere Seite führen. (Z. B. ein Bild von einen Apfel führt zur Seite apfel.html, ein Bild von einer Banane führt zur Seite banane.html, ein Bild von der Kirsche für zur Seite kirsche.html usw.)
Durch googeln und selbst etwas abändern habe ich bisher folgendes bis jetzt:
Wichtig ist mir auch, dass die alten Bilder, die schon da waren auch komplett verschwinden, und nicht im Hintergrund bleiben. Bei dem Beispiel bei Selfhtml waren die nämlich noch im Hintergrund da.
Ich hoffe, es kann mir jemand helfen.
MFG derwunner
ich bin schon langsam etwas am verzweifeln.
Also was ich brauche ist ein Script, dass Bilder auf der gleichen Stelle ein- und ausblendet. Also eine Art Slideshow auf der gleichen Stelle. Je nach Bild soll der Link auf eine andere Seite führen. (Z. B. ein Bild von einen Apfel führt zur Seite apfel.html, ein Bild von einer Banane führt zur Seite banane.html, ein Bild von der Kirsche für zur Seite kirsche.html usw.)
Durch googeln und selbst etwas abändern habe ich bisher folgendes bis jetzt:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<script type="text/javascript">
var images = new Array(
["apfel.png", "describing text for image one", "apfel"],
["banane.png", "describing text for image two", "banane"],
["kirsche.png", "describing text for image three", "kirsche"]);
var speed = 10;
var interval = 4000;
var index = oldIndex = 0;
function start() {
createBackgroundContainer(document.getElementById('image'));
setTimeout('startFading()', interval);
}
function createBackgroundContainer(element) {
var image = document.createElement('img');
image.setAttribute('id', 'image');
image.setAttribute('src', element.src);
image.setAttribute('alt', element.alt);
image.style.width = element.width + 'px';
image.style.height = element.height + 'px';
image.style.margin = '0';
var backgroundContainer = document.createElement('span');
backgroundContainer.setAttribute('id', 'backgroundContainer');
backgroundContainer.style.display = 'block';
backgroundContainer.style.margin = '2em auto 0 auto'; //Die Werte müssen ggf. an die Formatierungen der Seite angepasst werden.
backgroundContainer.style.padding = '0';
backgroundContainer.style.width = element.width + 'px';
backgroundContainer.style.height = element.height + 'px';
backgroundContainer.appendChild(image);
var parent = element.parentNode;
parent.replaceChild(backgroundContainer, element);
}
function startFading() {
var image = document.getElementById('image');
var link = document.getElemtById('link');
index = Math.round(Math.random() * (images.length - 1));
while (oldIndex == index) {
index = Math.round(Math.random() * (images.length - 1));
}
oldIndex = index;
var backgroundContainer = document.getElementById('backgroundContainer');
backgroundContainer.style.backgroundImage = "url('" + document.getElementById('image').src + "')";
image.style.opacity = 0;
image.setAttribute('src', images[index][0]);
image.setAttribute('alt', images[index][1]);
image.setAttribute('title', images[index][2]);
link.setAttribute('href', images[index][2] + '.html');
for (var i = 0; i < 100; i++) {
setTimeout('fadeIn(' + i + ')', speed*i);
}
setTimeout("startFading()", interval);
}
function fadeIn(i) {
document.getElementById('image').style.opacity = i/100;
}
</script>
</head>
<body onload='start();'>
<a id="link" href="#"><img id="image" src="Buero.png" alt="describing text for image one" title="title for image one" width="100" height="100" /></a>
</body>
</html>Wichtig ist mir auch, dass die alten Bilder, die schon da waren auch komplett verschwinden, und nicht im Hintergrund bleiben. Bei dem Beispiel bei Selfhtml waren die nämlich noch im Hintergrund da.
Ich hoffe, es kann mir jemand helfen.
MFG derwunner
