Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

CSS: Zufällig Banner wählen





Frage

Hallo! Ich habe ein Problem: ich möchte gerne, dass ich in den Ordner verschiedene HeaderBilder hinterlegen kann und das CSS-Scipt per Zufall ein Bild auswählt und anzeigt. Wie muss ich dazu das Scipt verändern?? Wäre super, wenn mir jemand sagen könnte wie das Script dann richtig aussehen muss ! Vielen Dank Viele Grüße Seb. [code] /* HEADER -------------------------------------------------------------------------- */ #header { padding: 26px 28px 26px 28px; margin: 0px 25px 0px 25px; width: 670px; height: 130px; background-image: url('images/header_bg.gif'); background-repeat: repeat-x; background-position: top center; } #header_left { float: left; height: 22px; width: 335px; color: #ffffff; font-size: 22px; font-weight: bold; text-align: left; } #header_right { float: right; height: 22px; width: 335px; color: #ffffff; font-size: 22px; font-weight: bold; text-align: right; }[/code]

Antwort 1 von rfb

CSS ist keine Programmiersprache - es gibt auch keine Zufallsfunktionen. Also:
Mit CSS ist das nicht möglich!

JavaScript wäre denkbar:

<script type="text/javascript">
function banner() {
var meinebanner=['images/header_bg0.gif','images/header_bg1.gif','images/header_bg2.gif'];
var b=Math.floor(Math.random()*meinebanner.length);
var header=document.getElementById("header");
header.backgroundImage="url("+meinebanner+")";
}
window.onload=function () {
banner();
}
</script>


Antwort 2 von rfb

sorry, Fehler, richtig:

...
header.style.backgroundImage="url("+meinebanner+")";
...


Antwort 3 von pcverw

wie soll ich dass dann einbauen???

sry, hab leider recht wenig ahnung :(

Vielen Dank!!

Antwort 4 von yesyesyesyes

einfach in head der jeweiligen seite

Antwort 5 von rfb

Da fällt mir doch gleich noch ein Fehler auf - diesmal durch die Supportnet-Software eingefügt (die schluckt i und b in eckigen Klammern, daher nun ein r).

Hier nochmal das ganze Script fehlerfrei zuzüglich einer kleinen Verbesserung:

<script type="text/javascript">
function banner() {
var meinebanner=['images/header_bg0.gif','images/header_bg1.gif','images/header_bg2.gif'];
var r=Math.floor(Math.random()*meinebanner.length);
var header=document.getElementById("header");
if (header) header.style.backgroundImage="url("+meinebanner[r]+")";
}
window.onload=function () {
banner();
}
</script>


Wie yes... schon sagte gehört solch ein Script in den head-Bereich (also zwischen
<head> 
und
</head>
) - oder in eine externe JS-Datei.

Und ins Array
meinebanner
solltest du alle in Frage kommenden banner samt Pfad eintragen.

Antwort 6 von some1unknown

andere möglichkeit: php:

<?php
$path = ".";

$i = 0;
$handle=opendir ($path);
while (false !== ($file = readdir ($handle))) {
if($file != "." && $file != "..")
{

$files[$i] = $file;
$i++;
}

}
closedir($handle);  

$random = rand(0,$i - 1);

$text2print = "<img src = '";
$text2print .= $files[$random];
$text2print .= "' alt = 'mein bild'>";

print($text2print);

?>


Antwort 7 von some1unknown

$path = der pfad in der deine bilder liegen, das script nimmt dann ein zufälliges bild aus dem verzeichnis und zeigt es an

Antwort 8 von some1unknown

und was ich vergessen hab:
->mit is_dir($file) prüfen, ob ein verzeichnis vorliegt, dann dürfen auch unterordner in dem verz. liegen
->mit str_explode() auf eine dateiendung prüfen, so dass zb nur *.jpg files benutzt werden

mfg

Antwort 9 von some1unknown

letzer schwachpunkt:

...
$text2print = "<img src = '";
$text2print .= $path;
$text2print .= "/";
$text2print .= $files[$random];
$text2print .= "' alt = 'mein bild'>";
...

oder in deinmem fall mit dem bg:

background-image: url('images/header_bg.gif');
mit dem script ersetzen

$text2print = "<img src = '";
$text2print .= $path;
$text2print .= "/";
$text2print .= $files[$random];
$text2print .= "' alt = 'mein bild'>";
ersetzten durch

print("background-image: url('");
print($path);
print("/");
print($files[$random]);
print("');");

Antwort 10 von rfb

und noch ein Schwachpunkt:
du kannst kein externes Stylesheet nutzen, da PHP-Interpreter sich in der Regel für CSS-Dateien nicht interessieren.

PS: warum setzst du den String nicht vor der Ausgabe zusammen anstatt 5mal print aufzurufen (ähnlich dem Originalscript)?

Antwort 11 von some1unknown

hi

@rfb
1.: hast recht, aber ein
<style>
#header background-image: url('abc.jpg');
</style>

wird ja wohl keinen stören und
2.: wie du schon sagtest:
es läuft aufs gleiche hinaus, mehr code is es auch nich unbedingt, is einfach unschöner, hab nich drüber nachgedacht

Antwort 12 von some1unknown

und bevor sich jemand drüber aufregt, ja! ich hab die klammern vergessen:

<style>
#header {background-image: url('abc.jpg');}
</style>


mfg

Antwort 13 von some1unknown

mom
was man aber machen kann:
styles.php:
<?php
readfile("styles.css");

+ mein code +

?>


dann <link rel=stylesheet type="text/css" href="styles.php">

ha
mfg

Antwort 14 von rfb

allerdings könnte dies Browser, die darauf geeicht sind für PHP den MIME-TYPE text/html anzunehmen doch verwirren.
Du müsstest dann im header explizit einen anderen Mime-Type mit übergeben per PHP - und das dürfte Anfänger überfordern.

Antwort 15 von Supermax

Man kann das php-script auch so schreiben, daß einfach die URL des gewählten Banners per Redirect (Location:-Header) zurückgegeben wird. Das hat den Vorteil, daß die CSS-Datei nicht verändert werden muß, statt eines Bildes wird dann einfach folgendes angegeben:

background-image: url(/bannerverzeichnis/bannerrotation.php);


und die "bannerrotation.php":

<?php
// Code zum auswählen des Banners
// der Dateiname des Banners steht dann in diesem 
// Beispiel in $filename!
header('Location: http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF'])."/$filename");
?>


Das Beispiel geht davon aus, daß Banner und PHP-Script im selben Verzeichnis (in diesem Fall "/bannerverzeichnis/") liegen.

Durch Verwendung der $_SERVER - Variablen passt das Script die Weiterleitungs-URL immer seinem tatsächlichen Speicherort im Dateisystem an.

Antwort 16 von some1unknown

@rfb: reicht das "type="text/css"" im link-tag nicht aus?
außerdem denke ich nicht, dass ein
header("Content-Type: text/css");
Anfänger verunsichern sollte, ist doch ziemlich klar zu verstehen.
da muss ich sagen dass der von @supermax gesendete header weitaus komplizierter ist

mfg

Antwort 17 von rfb

Zitat:
reicht das "type="text/css"
nö, die vom Server gelieferten Daten haben immer Vorrang

Zitat:
da muss ich sagen dass der von @supermax gesendete header weitaus komplizierter ist
ja, ist er! und ob eine Datei mit PHP-Endung als HG-Bild akzeptiert wird bezweifele ich aus gleichem Grunde.

Antwort 18 von some1unknown

ich würd auch nicht auf den location-header zurückgreifen, hier also die komplette Datei, einfach mal ausprobieren

<?php
header("Content-Type: image/png"); //geht davon aus dass deine bilder im pngformat vorliegen

$path = ".";

$i = 0;
$handle=opendir ($path);
while (false !== ($file = readdir ($handle))) {
if($file != "." && $file != "..")
{

$files[$i] = $file;
$i++;
}

}
closedir($handle);  

$random = rand(0,$i - 1);


readfile($files[$random]);


?>


Antwort 19 von some1unknown

@rgb: jo, hast recht, php geht (bei mir^^) nicht als css-hintergrundbild
mfg

Antwort 20 von some1unknown

nur so aus interesse: warum kann mann *.php-dateien nicht als hintergrundbild verwenden??

Antwort 21 von rfb

Schau einfach mal in die Einstellungen deines Browsers, was er mit PHP machen soll.

Default sollte sowas wie im Browser anzeigen als text/html sein.

Wie schon in Antwort 14 erwähnt!

Antwort 22 von some1unknown

Zitat:
nö, die vom Server gelieferten Daten haben immer Vorrang
also würde ich mal denken, mdass mein
Zitat:
header("Content-Type: image/png");
bewirkt, dass der browser von einem png-bild ausgeht

Antwort 23 von rfb

und - getestet (auch im IE, der ja nicht alles immer gleich kapiert)?

Antwort 24 von some1unknown

ok, du hattest recht, lag an einem kleinen fehler im script, hier is mal ein kleines beispiel.
der fehler(falls es jemanden interessiert):
Zitat:
->mit str_explode() auf eine dateiendung prüfen, so dass zb nur *.jpg files benutzt werden
ich hatte eine php-datei im ordner drin
getestet im ff und ie

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: