Problem mit Javascript - Zufallsbild und Logo

[simsonundco]

Hallo,

bin gerade dabei meine “Schwalbe Seite” umzugestalten und kämpfe mit einem kleinen Problem… Ich habe einen Code (Javascript), der mir Zufallsbilder (=Websitebanner) anzeigt. Nun möchte ich jedoch im Zuge der Umgestaltung ein Logo anzeigen lassen, quasi als überlappendes Bild mittels z-Index. Das klappt zwar mittlerweile auch schon - erst mal provisorisch mittels “php-include”.

Allerdings möchte ich nun, dass das Logo je nach Zufallsbild (also von mir definiert) entweder auf der rechten oder auf der linken Seite direkt am oberen Bildschirmrand erscheint.

Momentan ist das Logo immer auf der linken Seite. Gibt es eine Möglichkeit, die Lage des Logos in den Quellcode des bereits vorhandenen Javascriptes für die Zufallshintergrundbilder zu integrieren?

Link zur Seite: http://simsonundco.bplaced.net/home.html
(zum testen erst mal nur auf der “home.html”)

Code für die Zufallsbilder

<script language="JavaScript" type="text/javascript">
<!--
var image = new Array();
var link  = new Array();

image[1] = './banner1.jpg';
image[2] = './banner2.jpg';	
image[3] = './banner3.jpg';	

var num = Math.random();
var ran = Math.floor((image.length - 1) * num) + 1;

document.write('<img src="' + image[ran] + '" border="0" />');
//-->
</script> 			

Hier noch mal als Bild verdeutlicht:

Hat da jemand eine Idee von Euch?

Vielen Dank im voraus!

Viele Grüße
Daniel

[Chris]

Hi,

auch wenn ich mich mit JS überhaupt nicht auskenne versuch ich mal einen Ansatz:
Mittels if-Befehl lässt sich separieren - weswegen ich das auch vorschlagen würde.

[quote]
Wenn Bild = 1,2,3,4 dann Logo links
Sonst Logo rechts[/quote]

Ansonsten würde ich empfehlen PHP zu nutzen - einfach, weil es für derartige Vorhaben imho besser ist.

[hoffmann]

Daß das java-Skript - wenn überhaupt - erst ausgeführt wird, nachdem mit dem PHP bereits eine
Ausgabe erzeugt hat, wäre das also die falsche Reihenfolge.
Von daher sollte also das Bild oder jedenfalls das referenzierende img-Element erst komplett
per PHP erzeugt werden, ebenso wie das img für das Logo und die CSS-Anweisungen, wie
diese zueinander zu positionieren sind.
Bei echten Zufallsbildern kann es auch notwendig/sinnvoll sein, die komplett mit Logo mit PHP zu
erzeugen - bei dir sieht es allerdings so aus, als würdest du nur zufällig eines von drei immer
gleichen verwenden, was dann deutlich langweiliger ist.
Im Falle richtiger Zufallsbilder:
Je nachdem, was das für ein Bild ist, erzeugt man das entweder einfach mit PHP als SVG oder
mit den entsprechenden speziellen Bibliotheken als PNG oder JFIF/JPEG.

Auch das Übereinanderlegen von zwei Bildern funktioniert natürlich sowohl mit SVG als auch
mit (X)HTML+CSS als Ausgabe, sofern man eben zum Zeitpunkt der Erzeugung der Ausgabe
mit PHP weiß, um welche Bilder es sich handelt.

Wenn du das wirklich mit einem anwenderseitigen Skript realisieren willst, so solltest du sowas
wie document.write komplett vergessen und die Erzeugung und Dekoration (Positionierung der
Bilder) mit CSS komplett über das DOM realisieren. In dem Falle würde also erst das
img-Element mit dem Werbebild erzeugt, dieses über das DOM mit CSS positioniert und dann
das img-Element mit dem Logobild abhängig davon und ebenfalls über das DOM per CSS positioniert.
Details kann ich da auch nicht nennen, weil auch ich mich mit java-script nicht beschäftige ;o)
Meine rudimentären Kenntnisse reichen jedenfalls dafür, document.write als ungeeignet zu
identifizieren und eine komplette Erzeugung über das DOM anzuregen - schon formal ergibt es
keinen Sinn, innerhalb eines script-Elementes irgendwas hinschreiben zu lassen, schon gar
nicht irgendein Element.

[simsonundco]

Hey,

erstmal vielen Dank für Eure Antworten!
Ich bin ehrlich gesagt auch eher unwissend in Sachen Javascript und was immer froh, dass das so funktioniert hat…
Hmm… habe gerade schon mal ein bisschen nach einer Möglichkeit geschaut, wie man das ganze mit PHP umsetzen könnte, aber da bin ich auch schon wieder mit meinem Latein am Ende…

@hoffmann
Momentan habe ich die Bilder einfach abwechselnd abrufen lassen, quasi die “langweilige” Variante

Gruß Daniel

[hoffmann]

PHP-Variante:

Also wenn du N fertige Bilder hast, ist das Vorgehen doch recht einfach.
Wie bei deinem js-Teil packst du die Bildernamen und die Alternativtextes jeweils in ein
array, ebenso die gewünschte Positionierungsklasse des Logos (z.B. .logolinks und .logorechts)
Für beide Klassen legst du die Positionierung fest in der CSS-Datei ab, ebenso für das
Werbebild.

Per mt_rand
de2.php.net/manual/de/function.mt-rand.php
wählst du eine der N Möglichkeiten aus - und bastelst damit aus den einzelnen arrays eine
(X)HTML+CSS-Ausgabe.

Wenn du Möglichkeit $m gewählt hast, sieht das doch grob und ohne elegantere Tricks so aus:

<img class='werbung' src='<?php echo $bild[$m]; ?>' alt='<?php echo $alt[$m]; ?>' width='<?php echo $width[$m]; ?>' height='<?php echo $height[$m]; ?>' />
<img class='<?php echo $class[$m]; ?>' src='logo.png' alt="Schwalbe" />

Dazu legst du wie beschrieben die arrays $bild, $alt, $width, $height, $class an.
In der CSS-Datei gibst du zusätzlich im Bedarfsfalle mit der Klasse .werbung die Position des
Werbebildes an - ist die auch unterschiedlich, müßtest du dafür auch ein array verwenden.

[simsonundco]

Hey Hoffmann,

vielen Dank für Deine Antwort!
Werde mich da mal in den nächsten Tagen ransetzen! Da muss ich mich erst mal in Ruhe reinlesen und dann mal schauen ob das dann funzt

Noch mal lieben Dank!

Viele Grüße
Daniel