• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slideshow (Bilder mit Overlay)

S

sappy

Neues Mitglied
Hallo,

ich möchte mal an meinen gestrigen Beitrag anknüpfen.
Ich habe einen Bilder-Slideshow. Diese läuft wunderbar. Allerdings möchte ich hier auch Bilder verwenden, die aus "zwei" Bildern bestehen.
Ein Bild im Untergrund, das andere als Overlay (zum Teil transparent dann).

Hier mein Quelltext:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
var timeDelay = 0.5;
var Pix = new Array
("bild1.gif"
,"bild2.gif"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>


</head>

<body OnLoad="startPix()" text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<img name="ChangingPix" src="bild1.gif">

</body>
</html>


Jetzt wollte ich das abändern, dass er die Bilder mit den Overlays nimmt:

also im Body Teil dann:

Code: 
<img class="bgPic" src="bild1.gif" alt="" border="0" />
<div class="foreGround"><img class="FLeft" src="layer.gif" alt="" border="0" /></div>

Das macht er aber leider so nicht mehr mit :(
Und im JS-Teil muss das ganze ja sicher auch noch angepasst werden.
Ist das irgendwie möglich?

Grüße
 
Ne, das sind beides schlechte Möglichkeiten, die unnötige Abhängigkeiten zu Plugins erzeugen.

Das bereits angesprochene JavaScript ist genau richtig. Der Code müsste eben entsprechend erweitert werden, sodass jeweils zwei Bilder geladen werden, die dann übereinander angeordnet werden (etwa per CSS-Eigenschaft z-index).
 
Hallo,

ich hätte es jetzt so gemacht:

<div style="z-index: 1;"><img src="img/1300.jpg"></div>
<div style="z-index: 2;"><img src="img/layer.gif"></div>

Kann ich das irgendwie als Variable deklarieren?
Dass ich dieses Bild (bestehend aus 2 Bidern) an dieser Stelle aufrufen kann:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var timeDelay = 0.5; var Pix = new Array ("zummengesetztes_bild1.gif" ,"zummengesetztes_bild2.gif " );
Zum Vergrößern anklicken....

Grüße
 
Zuletzt bearbeitet:
Na ja, das, was du schon für ein Bild programmiert hast, einfach noch für ein zweites Bild erweitern. Wo liegt denn das konkrete Problem?
 
Mein Problem ist, wie ich es an dieser Stelle einbinde:

var Pix = new Array ("zummengesetztes_bild1.gif" ,"zummengesetztes_bild2.gif " );

Hier stand ja bisher eine Aufführung aller für den Slide benutzen Bildern. Aber hier sollen ja jeweils die zusammengesetzten Bilder rein.
Bild + Overlay. Die habe ich ja schon hinbekommen. Aber an dieser Stelle reinzuschreiben:

<div style="z-index: 1;"><img src="img/1300.jpg"></div>
<div style="z-index: 2;"><img src="img/layer.gif"></div>

geht nicht.

Grüße
 
Pack in das Pix-Array einfach weitere Arrays mit je zwei Einträgen und weise dann jeweils den ersten Eintrag dem „Background-Image“ zu und den zweiten Eintrag dem „Foreground-Image“.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben