Ergebnis 1 bis 10 von 10

Thema: Zufallsgenerator für Bilder in einer css - Datei

  1. #1
    Gast

    Standard 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]
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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...
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  3. #3
    Shogun Avatar von DarkSyranus
    Registriert seit
    28.03.2006
    Ort
    ::1/128
    Alter
    25
    Beiträge
    3.446
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    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

  4. #4
    König(in)
    Registriert seit
    06.06.2007
    Ort
    Bi
    Beiträge
    1.015
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich finde unsere Beitrage ergänzen sich doch gut DarkSyranus ^^
    Sämtlicher Code erhebt keinen Anspruch auf syntaktische Korrektheit geschweige denn Ausführbarkeit und ist für die Implementation außerhalb der Beispiele nicht geeignet.

    Kein Support für kommerzielle Scripts | Kein kostenloser Support via ICQ

  5. #5
    Gast

    Standard

    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

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

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

    Code:
    function zufallszahl&#40;n&#41;&#123;
    zahl = Math.floor&#40;Math.random&#40;&#41;* &#40;n+1&#41;&#41;;
    return zahl;
    &#125;
    
    var bild = new array&#40;&#41;;
    
    bild&#91;0&#93; = "image1.jpg"
    bild&#91;1&#93; = "image2.jpg"
    bild&#91;2&#93; = "image3.jpg"
    bild&#91;3&#93; = "image4.jpg"
    
    document.write&#40;"[img]" + bild&#91;zufallszahl&#40;bild.length - 1&#41;&#93; + "[/img]"&#41;;
    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.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Gast

    Standard

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

  8. #8
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <html>
    <head>
    <script language="javascript">
    function...
    ..
    </script>
    </head>
    ...
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  9. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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 &#123;
    	background-color&#58; #FFFFFF;
    	border-top-width&#58; 15px;
    	border-right-width&#58; 0px;
    	border-bottom-width&#58; 1px;
    	border-left-width&#58; 0px;
    	border-top-style&#58; solid;
    	border-right-style&#58; solid;
    	border-bottom-style&#58; solid;
    	border-left-style&#58; solid;
    	border-top-color&#58; #000000;
    	border-right-color&#58; #333333;
    	border-bottom-color&#58; #000000;
    	border-left-color&#58; #333333;
    	height&#58; 150px;
    	display&#58; table-cell;
    	vertical-align&#58; top;
    	background-image&#58; url&#40;../images_template1/header_bg.jpg&#41;;
    &#125;
    
    td.horizontal_center1 &#123;
    	background-color&#58; #FFFFFF;
    	border-top-width&#58; 15px;
    	border-right-width&#58; 0px;
    	border-bottom-width&#58; 1px;
    	border-left-width&#58; 0px;
    	border-top-style&#58; solid;
    	border-right-style&#58; solid;
    	border-bottom-style&#58; solid;
    	border-left-style&#58; solid;
    	border-top-color&#58; #000000;
    	border-right-color&#58; #333333;
    	border-bottom-color&#58; #000000;
    	border-left-color&#58; #333333;
    	height&#58; 150px;
    	display&#58; table-cell;
    	vertical-align&#58; top;
    	background-image&#58; url&#40;../images_template1/header/1.jpg&#41;;
    &#125;
    
    td.horizontal_center2 &#123;
    	background-color&#58; #FFFFFF;
    	border-top-width&#58; 15px;
    	border-right-width&#58; 0px;
    	border-bottom-width&#58; 1px;
    	border-left-width&#58; 0px;
    	border-top-style&#58; solid;
    	border-right-style&#58; solid;
    	border-bottom-style&#58; solid;
    	border-left-style&#58; solid;
    	border-top-color&#58; #000000;
    	border-right-color&#58; #333333;
    	border-bottom-color&#58; #000000;
    	border-left-color&#58; #333333;
    	height&#58; 150px;
    	display&#58; table-cell;
    	vertical-align&#58; top;
    	background-image&#58; url&#40;../images_template1/header/2.jpg&#41;;
    &#125;
    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&#40;n&#41;&#123; 
    zahl = Math.floor&#40;Math.random&#40;&#41;* &#40;n+1&#41;&#41;; 
    return zahl; 
    &#125; 
    
    var cssklasse = new Array&#40;&#41;; 
    
    cssklasse&#91;0&#93; = "td.horizontal_center" ;
    cssklasse&#91;1&#93; = "td.horizontal_center1" ;
    cssklasse&#91;2&#93; = "td.horizontal_center2" ;
    
    
    
    function wechseln&#40;&#41;&#123;
    var target = document.getElementById&#40;"wechseldich"&#41;;
    alert&#40;target.className&#41;;
    target.className = cssklasse&#91;zufallszahl&#40;cssklasse.length - 1&#41;&#93;;
    &#125;
    
    </script>
    
    </head>
    
    <body onClick="wechseln&#40;&#41;;">
    
    <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>
              
    
    Narrenzunft Hefigkofen e.V. </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">Startseite</div></td>
            <td width="15%"><div class="navigation">Termine</div></td>
            <td width="17%"><div class="navigation">Wissenswertes</div></td>
            <td width="12%"><div class="navigation">Bilder</div></td>
            <td width="16%"><div class="navigation">G&auml;stebuch</div></td>
            <td width="12%"><div class="navigation">Links</div></td>
            <td width="15%"><div class="navigation">Impressum</div></td>
          </tr>
        </table>
    ... usw
    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  10. #10
    Bandit
    Gast

    Standard AW: Zufallsgenerator für Bilder in einer css - Datei

    Zitat Zitat von Lufiki Beitrag anzeigen
    Habe jetzt diesen alten Thread entdeckt.
    Schön für dich. Ist aber kein Grund, diesen Thread wieder neu zu entfachen.

Ähnliche Themen

  1. Einbinden einer Datei
    Von vision2003 im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 10.11.2007, 00:09
  2. textänderung in einer PDF Datei
    Von delphin im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 14.05.2007, 17:06
  3. Textinhalt einer html.datei aus einem andere datei aufrufen.
    Von redindian im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 09.04.2007, 10:21
  4. Wie include ich eine php Datei in einer .tpl-Datei?
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 23.02.2007, 04:06
  5. Javascript: externe JS-Datei in einer externen JS-Datei
    Von µaTh im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 29.10.2005, 19:27

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •