Random CSS Zeile

[Björn]

Tag,
ich habe ein Problem.Ich möchte für einen Headkopf bei jedem laden der Seite ein anderes Bild zeigen. Gibt es hierfür einen Tip wie ich solch einen Randomeffekt bewirken kann ?

Code:
.head {
background-image: url(inc/images/head_b.jpg);
}

beim zweiten laden der Seite soll dann z.B. dieses geladen werden.

.head {
background-image: url(inc/images/head_c.jpg);
}

Gibt es hierfür eine CSS Lösung ?

[AllesMeins]

Hiho,

Gibt es hierfür eine CSS Lösung ?

Würde mich überraschen, da CSS eigentlich nichts ausführbares enhthalten sollte, sondern lediglich gestaltungsregeln.
Sowas löst du am besten mit einer serverseitigen Sprache.

Grüße

Marc

[Björn]

hat jemand eine Idee wie es am besten umzusetzen wäre ??

[Julian von Mendel]

Hi,

hat jemand eine Idee wie es am besten umzusetzen wäre ??

du kannst z. B. ein PHP-Skript erstellen, dass den Inhalt deiner CSS-Datei hat, einen auf .css endenden Dateinamen, per .htaccess kannst du einstellen, dass der PHP-Code trotzdem ausgeführt wird. Dann musst du ein wenig mit der rand()-Funktion rumhantieren, um zufällig ein Bild auszuwählen.
Für den Client sieht es dann wie eine ganz normale CSS-Datei aus, auf dem Server hingegen kannst du zufällige Werte in das CSS einfügen lassen.

Schöne Grüße
Julian

[MudGuard]

Hi,

du kannst z. B. ein PHP-Skript erstellen, dass den Inhalt deiner CSS-Datei hat, einen auf .css endenden Dateinamen, per .htaccess kannst du einstellen, dass der PHP-Code trotzdem ausgeführt wird. Dann musst du ein wenig mit der rand()-Funktion rumhantieren, um zufällig ein Bild auszuwählen.
Für den Client sieht es dann wie eine ganz normale CSS-Datei aus, auf dem Server hingegen kannst du zufällige Werte in das CSS einfügen lassen.

Nachteil dabei: wegen einer einzigen Style-Deklaration (dem zufälligen Hintergrundbild) darf dann das gesamte CSS-File, in dem die Deklaration steht, nicht mehr gecached (entsprechende Header müssen natürlich gesetzt werden) werden, da sonst ja der Zufallseffekt wieder weg ist ==> überflüssiger Traffic + überflüssige Wartezeit für den Besucher.

Je nachdem, wie wichtig der Zufallsbildeffekt ist (m.E: total unwichtig - ) kann es sinnvoller sein, das per Javascript zu machen.
Ohne Javascript gäb's dann halt immer dasselbe Bild. Aber das CSS-File belastet den Traffic nicht mehr als absolut nötig.

cu,
Andreas

[Björn]

Hallo Andreas,

na da hast du mehr als recht. suche gerade etwas passendes in java aber noch gibt google nichts gescheites raus.

[Björn]

folgendes Problem. Wie bekomme ich beides zueinander ???

Code quellcode:

<table width="100%" border="0" cellpadding="0" cellspacing="0" background="inc/images/head_w.jpg">

Code Random Image:

<SCRIPT LANGUAGE="Javascript"><!--

// ***********************************************
// AUTHOR: WWW.CGISCRIPT.NET, LLC
// URL: http://www.cgiscript.net
// Use the script, just leave this message intact.
// Download your FREE CGI/Perl Scripts today!
// ( http://www.cgiscript.net/scripts.htm )
// ***********************************************

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "<img src='inc/images/head_b.jpg' border='0'>"
image[number++] = "<img src='inc/images/head_h.jpg' border='0'>"
image[number++] = "<img src='inc/images/head_p.jpg' border='0'>"
image[number++] = "<img src='inc/images/head_r.jpg' border='0'>"
image[number++] = "<img src='inc/images/head_t.jpg' border='0'>"
image[number++] = "<img src='inc/images/head_w.jpg' border='0'>"
// keep adding items here...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>

[Orlando]

Hallo Andreas,

du kannst z. B. ein PHP-Skript erstellen, dass den Inhalt deiner CSS-Datei hat

Nachteil dabei: wegen einer einzigen Style-Deklaration (dem zufälligen Hintergrundbild) darf dann das gesamte CSS-File, in dem die Deklaration steht, nicht mehr gecached (entsprechende Header müssen natürlich gesetzt werden) werden, da sonst ja der Zufallseffekt wieder weg ist ==> überflüssiger Traffic + überflüssige Wartezeit für den Besucher.

Korrekt. Das Script sollte besser die Grafiken ausliefern, nicht das Stylesheet.

http://photomatt.net/scripts/randomimage

Grüße
 Roland

[MudGuard]

Hi,

Nachteil dabei: wegen einer einzigen Style-Deklaration (dem zufälligen Hintergrundbild) darf dann das gesamte CSS-File, in dem die Deklaration steht, nicht mehr gecached (entsprechende Header müssen natürlich gesetzt werden) werden, da sonst ja der Zufallseffekt wieder weg ist ==> überflüssiger Traffic + überflüssige Wartezeit für den Besucher.

Korrekt. Das Script sollte besser die Grafiken ausliefern, nicht das Stylesheet.

Nö. Da damit die Bilder nicht mehr gecached werden dürfen, der zusätzliche Traffic wird damit vom CSS-File auf die Bild-Files verschoben.

Entweder ein zusätzliches nichtzwischenzuspeicherndes Mini-CSS, das genau diese eine Deklaration samt Selektor enthält, oder aber eben per (immer identischem) Javascript-Code jeweils ein zufälliges Bild einbinden.

cu,
Andreas

[Christian Kruse]

你好 MudGuard,

Nachteil dabei: wegen einer einzigen Style-Deklaration (dem zufälligen
Hintergrundbild) darf dann das gesamte CSS-File, in dem die Deklaration
steht, nicht mehr gecached (entsprechende Header müssen natürlich gesetzt
werden) werden, [...]

Ja, wenn man das ganze CSS-File generieren lässt ;) Man könnte aber auch
nur einen Teil generieren lassen und per zweitem <link> einbinden, nur so
als Anregung *g*

再见,
 克里斯蒂安

[MudGuard]

Hi,

Ja, wenn man das ganze CSS-File generieren lässt ;) Man könnte aber auch
nur einen Teil generieren lassen und per zweitem <link> einbinden, nur so
als Anregung *g*

Siehe https://forum.selfhtml.org/?t=116556&m=745991
und beachte die Zeit Deines und meines Postings ;-)

cu,
Andreas

[Christian Kruse]

你好 MudGuard,

Siehe https://forum.selfhtml.org/?t=116556&m=745991
und beachte die Zeit Deines und meines Postings ;-)

Hehe, ja, das ist mir zwei Minuten nach dem Posten dann auch aufgefallen ;)

再见,
 克里斯蒂安

[Christian Kruse]

你好 Björn,

Gibt es hierfür eine CSS Lösung ?

Nope. Generiere das CSS per Script auf Server-Seite.

再见,
 克里斯蒂安

[Siechfred]

Tag Björn.

ich habe ein Problem.Ich möchte für einen Headkopf bei jedem laden der Seite ein anderes Bild zeigen. [...] Gibt es hierfür eine CSS Lösung?

Der Vollständigkeit halber sei erwähnt, dass es im IE die Möglichkeit gibt, Javascript und CSS zu verbinden, die sog. CSS-Expressions. Damit kannst du den Rückgabewert einer Script-Anweisung einem CSS-Attribut als Wert zuweisen:

Der Javascript-Teil:

// erzeuge Zufallszahl zwischen 1 und 20  
nr = Math.floor(Math.random() * 20) + 1;  
bild = "url(backgrd_nr" + nr + ".gif)";  
  
function constantExpression(const) {  
  return const;  
}

Der CSS-Teil:

body {  
  background-image:url(default.gif);  
}  
* html body {  
  background-image:expression(constantExpression(bild));  
}

Im IE bekommst du so bei jedem Reload ein zufälliges Hintergrundbild aus der Reihe backgrd_nr1.gif ... backgrd_nr20.gif, in allen anderen Browsern ist das Hintergrundbild "default.gif" (siehe hierzu Star-HTML-Hack).

Siechfred

[dbenzhuser]

N'Obend

ich habe ein Problem.Ich möchte für einen Headkopf bei jedem laden der Seite ein anderes Bild zeigen. Gibt es hierfür einen Tip wie ich solch einen Randomeffekt bewirken kann ?

Gibt es hierfür eine CSS Lösung ?

CSS nein. Ich habe ebenfalls mal so was versucht und bin dann dabei gelandet im CSS anstatt eines Bildes ein php-Script einzubinden:

  
background-image:url(bilder/getImage.php?foo=bar);  

Wobei getImage.php dann jeweils ein anderes Bild zurückgibt:

  
<?php  
srand((double)microtime()*1000000);  
$bildNummer = rand(1, 5);  
header('Location: head'.$bildNummer.'.jpg');  
exit;  
?>  

Allerdings spielt einem dann meist der Browsercache einen Streich… So wirklich funktionieren will es nicht :(

Tschö,
dbenzhuser

[Christian Seiler]

Hallo,

header('Location: head'.$bildNummer.'.jpg');

Du solltest aber schon einen absoluten URI senden, das ist im HTTP-Standard so vorgeschrieben.

Header('Location: http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/head'.$bildNummer.'.jpg');

(ja, ich weiß, das deckt nicht alles ab, aber meistens funktioniert's)

Viele Grüße,
Christian