Supportnet / Forum / Webseiten/HTML
Wie Bilder überblenden / verschwimmen???
Frage
Ich möchte gerne 10 Bilder nacheinander zeigen und diese sollen langsam in einander übergehen (verschwimmen / überblenden).
Wie kann ich das einfach und schnell erledigen? Ich habe nur wenig Kenntnisse von Scripten und bekomme nur das Einfachste hin.
Gibt es evtl. auch Möglichkeiten mit den bei mir vorhanden Programmen (MS Frontpage, Micrografx Image 10). Konnte hier nix finden was etwas taugt.
Vielen Dank!
Monsterchen
Antwort 1 von Redschina
hi monsterchen,
hier eine ganz nette slide-show für deine bilder:
zwischen <head> und </head>
<script language="JavaScript">
// nachstehendes kannst du anpassen
var slideShowSpeed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[0] = '5.jpg'
Pic[1] = '6.jpg'
Pic[2] = '7.jpg'
Pic[3] = '8.jpg'
Pic[0] = '9.jpg'
Pic[1] = '10.jpg'
// nachstehendes nicht ändern bitte:
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
und der body-tag sollte mindestens so aussehen:
<body onLoad="runSlideShow()">
... aufrufen des bilderwechsels "irgendwo" auf deiner seite zwischen <body> und </body> mit
<img src="1.jpg" name='SlideShow' width=150 height=150>
gruß, redschina
ps: wobei du in der letzten zeile bei <img src=.......> breite und höhe natürlich auch noch anpassen solltest
hier eine ganz nette slide-show für deine bilder:
zwischen <head> und </head>
<script language="JavaScript">
// nachstehendes kannst du anpassen
var slideShowSpeed = 3000;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[0] = '5.jpg'
Pic[1] = '6.jpg'
Pic[2] = '7.jpg'
Pic[3] = '8.jpg'
Pic[0] = '9.jpg'
Pic[1] = '10.jpg'
// nachstehendes nicht ändern bitte:
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
und der body-tag sollte mindestens so aussehen:
<body onLoad="runSlideShow()">
... aufrufen des bilderwechsels "irgendwo" auf deiner seite zwischen <body> und </body> mit
<img src="1.jpg" name='SlideShow' width=150 height=150>
gruß, redschina
ps: wobei du in der letzten zeile bei <img src=.......> breite und höhe natürlich auch noch anpassen solltest
Antwort 2 von rfb
@Redschina:
kann es sein, dass die indices hier ein bisschen durcheinandergekommen sind:
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[0] = '5.jpg'
Pic[1] = '6.jpg'
Pic[2] = '7.jpg'
Pic[3] = '8.jpg'
Pic[0] = '9.jpg'
Pic[1] = '10.jpg'
übrigens reagiert Netscape gelegentlich sauer auf das fehlende ";" am Ende der Zeilen.
kann es sein, dass die indices hier ein bisschen durcheinandergekommen sind:
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[0] = '5.jpg'
Pic[1] = '6.jpg'
Pic[2] = '7.jpg'
Pic[3] = '8.jpg'
Pic[0] = '9.jpg'
Pic[1] = '10.jpg'
übrigens reagiert Netscape gelegentlich sauer auf das fehlende ";" am Ende der Zeilen.
Antwort 3 von Redschina
ups... ja klar! danke rfb - ich hatte das script ursprünglich für 4 bilder und habe leider versäumt, alles anzupassen *schäm*
aber nett von monsterchen, dass er mir noch nicht den kopf abgerissen hat :-)
aber nett von monsterchen, dass er mir noch nicht den kopf abgerissen hat :-)