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:
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!!
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:
Wie yes... schon sagte gehört solch ein Script in den head-Bereich (also zwischen
Und ins Array
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> </head>Und ins Array
meinebannerAntwort 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
->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("');");
...
$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)?
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
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
@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:
mfg
<style>
#header {background-image: url('abc.jpg');}
</style>mfg
Antwort 13 von some1unknown
mom
was man aber machen kann:
styles.php:
dann <link rel=stylesheet type="text/css" href="styles.php">
ha
mfg
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.
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:
und die "bannerrotation.php":
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.
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
da muss ich sagen dass der von @supermax gesendete header weitaus komplizierter ist
mfg
außerdem denke ich nicht, dass ein
header("Content-Type: text/css");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 Vorrangreicht das "type="text/css"
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.da muss ich sagen dass der von @supermax gesendete header weitaus komplizierter ist
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
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!
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 nö, die vom Server gelieferten Daten haben immer Vorrang
Zitat:
header("Content-Type: image/png");
bewirkt, dass der browser von einem png-bild ausgehtheader("Content-Type: image/png");
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):
getestet im ff und ie
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->mit str_explode() auf eine dateiendung prüfen, so dass zb nur *.jpg files benutzt werden
getestet im ff und ie