Zufallsgenerator für Bilder in einer css - Datei

Hallo,

erst mal danke für die Unterstützung bei meiner ersten Frage, hat alles bestens geklappt, vielen Dank.

Hier nun das nächste Problem:

Ich habe bei der Homepage, an der ich gerade bastel, das Layout über eine css - Datei formatiert. In dieser Datei wird auch ein Bild als Hintergrund für die Navigationsleiste definiert.

Für dieses Bild möchte ich nun einen Zufallsgenerator machen, der automatisch bei jedem neuen Laden ein anderes Bild an der selben Stelle einfügt.

Bis jetzt sieht das ganze so aus:

background-image: url(../images_template1/header_bg.jpg);

Es gibt jetzt also mehrere Bilder, nennen wir sie 1.jpg, 2.jpg usw., die zufällig eingefügt werden sollen. Wie füge ich das am besten in die css - Datei ein?

Danke!!![/code]

K.Y.L.T.

Also eine CSS ist an sich statisch und kann nur dadurch verändert werden, indem du sie als ganzes neu generierst und dann unter dem selben Namen überschreibstg.

Daher gibt es z.B. in Php die Möglichkeit eine neue CSS zu bauen.

Du kannst alternativ allerdings auch die Background in die Html auslagern und dann hier u.a. per Javascript eien solche generierung errreichen...

DarkSyranus

Hm, das ist nicht so einfach zu lösen.
Mir fallen jetzt Spontan 2 Möglichkeiten ein.

Methode 1:
Dazu solltest du den Teil mit dem Hintergrund im <style></style>-Tag in deiner Seite einbinden.
Dann kann man, z.B. über PHP eine Zufalls Ausgabe machen.
Dabei können wir dir garantiert helfen, und das geht auch (eigentlich) ohne Probleme.

Methode 2:
Du könntest das Hintergrundbild über Javascript ändern lassen, das funktioniert jedoch nur, wenn der Client Javascript angeschaltet hat.

Ich selbst würde die erste benutzen, aber soll ja deine Entscheidung sein.
Allein mit HTML und/oder CSS kommst du da (leider) nicht weit.

/edit: Mist, zu langsam

K.Y.L.T.

Ich finde unsere Beitrage ergänzen sich doch gut DarkSyranus

OK, das ging schnell

Soll also heißen, ich nehm den Teil mit dem background, der oben steht, ganz aus der css raus und integrier den Zufallsgenerator in jede Seite einzeln, oder?

Da ich PHP - mäßig überhaupt keine Ahnung hab, müsstet ihr mir relativ ausführlich helfen

synaptic

hier mal nen script für zufallsbilder (nicht als hintergrund, sondern ganz normal für ein bild im body der page):

Code

function zufallszahl(n){
zahl = Math.floor(Math.random()* (n+1));
return zahl;
}


var bild = new array();


bild[0] = "image1.jpg"
bild[1] = "image2.jpg"
bild[2] = "image3.jpg"
bild[3] = "image4.jpg"


document.write("[img]" + bild[zufallszahl(bild.length - 1)] + "[/img]");

Alles anzeigen

jetzt musste des nur noch auf deine bedürfnisse anpassen^^

solltest du dich für die scriptvariante entscheiden, wäre es ratsam auf der page zu erwähnen, daß javascript für volle funktionalität eingeschaltet sein muss.

Danke, wie füge ich den Java Teil in den HTML - Code ein?

driver

HTML

<html>
<head>
<script language="javascript">
function...
..
</script>
</head>
...

synaptic

ich hab mich seinem problem mal angenommen und mir den projektordner schicken lassen...
das lustige ist, daß mein zufallsgenerator funktioniert, aber daß die bilder dennoch nicht angezeigt werden.
mein workaround war: in der style.css die klasse für die hintergrundgeschichte unter anderen classnames speichern und für jedes bild, daß er anzeigen möchte praktisch ne eigene klasse schreiben...

Code

td.horizontal_center {
	background-color: #FFFFFF;
	border-top-width: 15px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #333333;
	border-bottom-color: #000000;
	border-left-color: #333333;
	height: 150px;
	display: table-cell;
	vertical-align: top;
	background-image: url(../images_template1/header_bg.jpg);
}


td.horizontal_center1 {
	background-color: #FFFFFF;
	border-top-width: 15px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #333333;
	border-bottom-color: #000000;
	border-left-color: #333333;
	height: 150px;
	display: table-cell;
	vertical-align: top;
	background-image: url(../images_template1/header/1.jpg);
}


td.horizontal_center2 {
	background-color: #FFFFFF;
	border-top-width: 15px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #333333;
	border-bottom-color: #000000;
	border-left-color: #333333;
	height: 150px;
	display: table-cell;
	vertical-align: top;
	background-image: url(../images_template1/header/2.jpg);
}

Alles anzeigen

der zufallsgenerator hat dann die classNames in einem Array und wechselt auch diese (hab ich durch alert anzeigen lassen)

hier mal der code-ausschnitt:

Code

<head>


<script type="text/javascript">
function zufallszahl(n){ 
zahl = Math.floor(Math.random()* (n+1)); 
return zahl; 
} 


var cssklasse = new Array(); 


cssklasse[0] = "td.horizontal_center" ;
cssklasse[1] = "td.horizontal_center1" ;
cssklasse[2] = "td.horizontal_center2" ;






function wechseln(){
var target = document.getElementById("wechseldich");
alert(target.className);
target.className = cssklasse[zufallszahl(cssklasse.length - 1)];
}


</script>


</head>


<body onClick="wechseln();">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="shadow_left"></td>
    <td class="header_column">
	<table width="100%" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td class="logo_area">


Herzlich Willkommen bei der</p>



[b]Narrenzunft Hefigkofen e.V. [/b]</p></td>
        <td width="300">
          <form id="form1" name="form1" method="post" action="">
		  	Website durchsuchen 


            <input name="search_text" type="text" id="search_text" />
            <input type="submit" name="Submit" value="Search" />
          </form>
          </td>
      </tr>
    </table></td>
    <td class="shadow_right"></td>
  </tr>
  <tr>
    <td class="horizontal_column"></td>
    <td id="wechseldich" class="horizontal_center3"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="linkcontainer">
      <tr>
        <td width="13%"><div class="navigation">[url='index.html']Startseite[/url]</div></td>
        <td width="15%"><div class="navigation">[url='Termine.html']Termine[/url]</div></td>
        <td width="17%"><div class="navigation">[url='Wissenswertes.html']Wissenswertes[/url]</div></td>
        <td width="12%"><div class="navigation">[url='Galerie_index.html']Bilder[/url]</div></td>
        <td width="16%"><div class="navigation">[url='GB.html']G&auml;stebuch[/url]</div></td>
        <td width="12%"><div class="navigation">[url='Links.html']Links[/url]</div></td>
        <td width="15%"><div class="navigation">[url='Impressum.html']Impressum[/url]</div></td>
      </tr>
    </table>
... usw

Alles anzeigen

beim klicken[hab extra onClick genommen, damit man nich immer wieder neu laden muss- halt zur kontrolle] in der seite wird eben wie erhofft der classname per zufall vergeben
(zur zeit hat er nur 3 pics, aber des reicht ja auch erstmal)
vergebe ich einen der anderen classnames per hand und direkt, wird ein anderes bild angezeigt, doch beim script verschwindet das bild, obwohl (wie durch die alerts zu sehen ist) alles eigentlich funktionieren sollte!

EDIT:
hab den fehler grad beim babbeln mit meiner frau nebenbei erkannt.. die classnames sind ungültig oder irre ich mich?? habs gard geschafft! indem ich das td vorm className weggelassen hab

Bandit

Zitat von Lufiki

Habe jetzt diesen alten Thread entdeckt.

Schön für dich. Ist aber kein Grund, diesen Thread wieder neu zu entfachen.

Tags