Zur Navigation

Zufälliger Banner

1 Don

Hallo miteinander

Ich habe da eine Frage. Bei meiner HP ist der Banner in css eingebaut:

#logo {
background: url(../img/banner.jpg) 0 0 no-repeat black;
height: 64px;
padding: 0 20px;
text-align: right;
line-height: 54px;
font-size: 54px;
overflow: hidden;
letter-spacing: -3px;
margin: 0;
}

Es wäre toll, wenn aus verschiedenen Bannern zufällig einer beim laden der seite ausgewählt und dann angezeigt wird, um nicht jedesmal den selben banner zu haben...

Leider kenn ich mich net so aus, vielleicht kann man da ja n script einbauen, was zufällig die auswahl des banners übernimmt

kann mir irgendwer sagen, wie das geht?
wäre super nett

mfg Don

26.03.2006 17:56

2 Marcel (Gast)

Hallo

Mit HTML und CSS wirst du damit wohl nicht sehr weit kommen. Um so etwas realisieren zu können, musst du schon auf JS (JavaScript) oder PHP übergreifen, die sind allerdings auch nicht so leicht zu erlernen wie HTML oder eben CSS.
Falls es dir aber lediglich um diese Funktion gibt, kannst auch einfach mal im Internet schauen. Es gibt erstens sehr viele fertige Scripte und zweitens ist solch eine "Funktion" mittels PHP sehr leicht durch Arrays und der rand()-Funktion (www.php.net) erstellbar.

26.03.2006 20:03

3 Jörg Kruse

Wenn man das Einbinden des Banners als Hintergrundbild über CSS beibehalten möchte, könnte man eine Rotation in etwa mit folgendem PHP-Code erreichen:

<?php

$anzahl = 5;

$url[0] = "../img/banner.jpg";
$url[1] = "../img/banner-2.jpg";
$url[2] = "../img/banner-3.jpg";
$url[3] = "../img/banner-4.jpg";
$url[4] = "../img/banner-5.jpg";

srand(time());
$random = rand(0,$anzahl - 1);

echo "#logo {\nbackground: url($url[$random]) 0 0 no-repeat black;\n}\n";

?>

26.03.2006 20:53 | geändert: 26.03.2006 20:55

4 Don

Wo müsste ich das php script denn einfügen?

27.03.2006 12:13

5 Jörg Kruse

Den PHP-Abschnitt kannst du in den Head-Bereich innerhalb eines style-Elementes einbauen:

<head>

<!-- andere Abschnitte im head-Bereich -->

<style type="text/css">
<?php

$anzahl = 5;

$url[0] = "../img/banner.jpg";
$url[1] = "../img/banner-2.jpg";
$url[2] = "../img/banner-3.jpg";
$url[3] = "../img/banner-4.jpg";
$url[4] = "../img/banner-5.jpg";

srand(time());
$random = rand(0,$anzahl - 1);

echo "#logo {\nbackground: url($url[$random]) 0 0 no-repeat black;\n}\n";

?>
</style>
</head>

Damit das PHP ausgeführt wird, sollten die Dateien die Endung .php aufweisen (alternativ kann man den Server aber auch über .htaccess anweisen, in .html Dateien PHP auszuführen)

27.03.2006 12:23

6 Don

Also irgendwie komisch...
heißt es wirklich nbackground? Denn wenn ich das mit nbackground versuche, wird der banner gar nicht mehr angezeigt. Mach ich daraus background, wird immer nur der erste banner ausgewählt

27.03.2006 14:17

7 Jörg Kruse

Die Zeichenkombination \n bezeichnet einen Zeilenumbruch - du kannst die \n aber auch rausnehmen - die Umbrüche sind nur im Quelltext sichtbar. Diese Zeichen sollten jedenfalls keine Probleme bereiten - ic habe das Script eben auch nochmal ausprobiert - es funktioniert soweit.

Im body sollte dann noch ein Element mit der ID "logo" vorhanden sein, z.B.:

<div id="logo"></div>

Und die übrigen Definitionen für #logo sollten auch noch eingebunden sein - entweder in einer externen CSS-Datei oder ebenfals innerhalb des style-Elements

#logo {
height: 64px;
padding: 0 20px;
text-align: right;
line-height: 54px;
font-size: 54px; 
overflow: hidden; 
letter-spacing: -3px;
margin: 0; 
}

Denn sonst hat das Element #logo keine Höhe, so dass man auch kein Hintergrundbild sieht

Ansonsten müsstest du den Gesamt-Code mal posten oder eine Beispielseite verlinken, dass man den Fehler analysieren kann

27.03.2006 15:37

8 Marcel (Gast) 

$anzahl = 5;

$url[0] = "../img/banner.jpg";
$url[1] = "../img/banner-2.jpg";
$url[2] = "../img/banner-3.jpg";
$url[3] = "../img/banner-4.jpg";
$url[4] = "../img/banner-5.jpg";

Hast du die Daten auch deinen angepasst?


Jörg: Wäre es hier nicht viel logischer mit count() zu arbeiten?

27.03.2006 15:42

9 Jörg Kruse

Jörg: Wäre es hier nicht viel logischer mit count() zu arbeiten?

Ja, da hast du natürlich recht ;) Also besser so:

$url[0] = "../img/banner.jpg";
$url[1] = "../img/banner-2.jpg";
$url[2] = "../img/banner-3.jpg";
$url[3] = "../img/banner-4.jpg";
$url[4] = "../img/banner-5.jpg";

$anzahl = count($url);

Dann muss man $anzahl nicht manuell anpassen :)

27.03.2006 15:55

10 Marcel (Gast)

Nicht das wir uns falsch verstehen, das war keine Klugscheißerei, ich wollte nur auch was dazu lernen *g*.

27.03.2006 16:02