Hallo Allerseits!
Ich bin auf der Suche nach einer Lösung für einen automatischen Bilderwechsel (slideshow), im Idealfall inklusive Überblendung - wobei das dann wohl doch zu komplex ist.
Eine gifs-Animation fällt aufgrund der geringen Farbtiefe weg.
Nun habe ich ein java-script gefunden, welches grundsätzlich wie gewünscht funktioniert. Zuvor aber meine ersten Fragen:
1.) Ist es heutzutage noch ratsam java-scripts zu benutzen, oder sollte man wenn möglich nicht lieber nach anderen Lösungen Ausschau halten ? (z.B. weil häufig aus Sicherheitsgründen bei den Nutzern deaktiviert.)
2.) Kann mir Jemand eine "bessere" Variante statt java-script nennen ?
Falls dem nicht so ist, jetzt zu meinem Problem mit dem script.
(Hier die Testversion)
Der eigentliche Aufruf des scripts folgt an einer beliebigen Stelle mittels
nun möchte ich aber auf die Position (margin) und Erscheinung (padding + background-image für Rahmen) Einfluß nehmen.
Bei einem einfachen Bild erziele ich das mit z.B.
Also mit "id="foto", welches auf die entsprechenden Einstellungen in der css verweist.
3.) Wie bekomme ich die beiden, den Aufruf <div id=Bild></div> und id="foto" zusammen ?
Hier die relevanten code-Teile:
html:
css:
Vielen Dank schonmal im Voraus für Eure Mühe. Gruß,
Lyzarr
Ich bin auf der Suche nach einer Lösung für einen automatischen Bilderwechsel (slideshow), im Idealfall inklusive Überblendung - wobei das dann wohl doch zu komplex ist.
Eine gifs-Animation fällt aufgrund der geringen Farbtiefe weg.
Nun habe ich ein java-script gefunden, welches grundsätzlich wie gewünscht funktioniert. Zuvor aber meine ersten Fragen:
1.) Ist es heutzutage noch ratsam java-scripts zu benutzen, oder sollte man wenn möglich nicht lieber nach anderen Lösungen Ausschau halten ? (z.B. weil häufig aus Sicherheitsgründen bei den Nutzern deaktiviert.)
2.) Kann mir Jemand eine "bessere" Variante statt java-script nennen ?
Falls dem nicht so ist, jetzt zu meinem Problem mit dem script.
(Hier die Testversion)
Der eigentliche Aufruf des scripts folgt an einer beliebigen Stelle mittels
Code:
<div id=Bild></div>
Bei einem einfachen Bild erziele ich das mit z.B.
Code:
<img id="foto" src="start_01.jpg" />
3.) Wie bekomme ich die beiden, den Aufruf <div id=Bild></div> und id="foto" zusammen ?
Hier die relevanten code-Teile:
html:
HTML:
<script language="JavaScript" type="text/JavaScript">
var bilder = new Array();
bilder[0] = "start_01.jpg";
bilder[1] = "start_02.jpg";
bilder[2] = "start_03.jpg";
var timer = 3000; <!--Millisekunden-->
var arraylaenge = bilder.length;
var index = Math.floor(Math.random() * arraylaenge);
var Bildstring = '<img src="' + bilder[index] + '">';
function Bildwechsel () {
if (index == arraylaenge-1) {
index = 0;
} else {
index++;
}
Bildstring = '<img src="' + bilder[index] + '">';
document.all.Bild.innerHTML = Bildstring;
setTimeout("Bildwechsel()", timer);
}
function Bildanzeige () {
document.all.Bild.innerHTML = Bildstring;
Bildwechsel();
}
</script>
<body onLoad="Bildanzeige()">
<div id="pictures">
<div id=Bild></div>
</div>
css:
HTML:
#pictures{
width: 260px;
height: 400px;
float:right;
margin-left: 5px;
margin-top: 64px;
text-align: center;
color:#000000;
/* background-color:#A20D1B; */
border: dashed 1px #FFF;
}
#foto {
background: url(images/photo_frame_01.png) no-repeat left bottom;
margin-top: 80px;
padding: 8px 15px 17px 15px;
border: #666 0px solid;
border-left:none;
border-right:none;
border-bottom:none;
}
Vielen Dank schonmal im Voraus für Eure Mühe. Gruß,
Lyzarr