Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Headerbild manuell ändern

  1. #1
    Youngster
    Registriert seit
    20.06.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Headerbild manuell ändern

    Ich möchte auf meinem Blog ( http://silverscreen87.blogspot.com/ ) den Header gerne so einrichten, dass wenn man auf diesen klickt, man durch die verschiedenen Headerbilder durchblättern kann. Zurzeit ändert das Header bei jedem Neuladen der Seite.

    Der Code sieht folgendermassen aus:

    PHP-Code:
    <script type="text/javascript">

    var 
    banner= new Array()

    banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
    banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
    banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
    banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
    banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
    var random=Math.round(4*Math.random());

    document.write("<style>");
    document.write("#header {");
    document.write(' background:url("' banner[random] + '") no-repeat left TOP;');
    document.write(" }");
    document.write("</style>");

    </script> 
    Gibt es eine Möglichkeit was in dem oberen Code zu verändern dass man dann durch einen Klick auf das Headerbild zwischen den Bildern blättern kann?

    Gruss
    RoyalArsenal
    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
    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 AW: Headerbild manuell ändern

    ja gibt es...
    HTML-Code:
    <script type="text/javascript">
    
    function changehead(){
    var banner= new Array()
    
    banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
    banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
    banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
    banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
    banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
    var random=Math.round(4*Math.random());
    
    document.write("<style>");
    document.write("#header {");
    document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
    document.write(" }");
    document.write("</style>");
    }
    window.onload=changehead;
    </script>  
    und dann musste beim headerdiv nur noch nen onclick reinstopfen
    HTML-Code:
    <div id="header" onclick="changehead();"></div>
    Geändert von synaptic (20.09.2009 um 15:22 Uhr)
    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

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    20.06.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Headerbild manuell ändern

    Danke, hab es jetzt mal so eingebaut:

    PHP-Code:
    <script type='text/javascript'>

    function 
    changehead(){
    var 
    banner= new Array()

    banner[0]=&quot;http://lh6.ggpht.com/_7C4NVJJsAWU/SZCPvilXBwI/AAAAAAAABPA/e0QfDJtLifg/header1.jpg&quot;
    banner[1]=&quot;http://lh4.ggpht.com/_7C4NVJJsAWU/SZCRJiG9AAI/AAAAAAAABPI/6vSL0tdOYLM/header2.jpg&quot;
    banner[2]=&quot;http://lh3.ggpht.com/_7C4NVJJsAWU/SZCRJ46PssI/AAAAAAAABPQ/a8r58jVAOJM/header3.jpg&quot;
    banner[3]=&quot;http://lh3.ggpht.com/_7C4NVJJsAWU/SZClf2ff-tI/AAAAAAAABPc/jvGF5uXxyus/header4.jpg&quot;
    banner[4]=&quot;http://lh3.ggpht.com/_7C4NVJJsAWU/SZClpk4At6I/AAAAAAAABPk/Aa5KHAWywQk/header5.jpg&quot;
    banner[5]=&quot;http://lh6.ggpht.com/_7C4NVJJsAWU/SZClpqr_WGI/AAAAAAAABPs/RMNrSrFCBts/header6.jpg&quot;
    .
    .
    .
    .
    .
    var 
    random=Math.round(232*Math.random());

    document.write(&quot;<style>&quot;);
    document.write(&quot;#header {&quot;);
    document.write(&#39; background:url(&quot;' + banner[random] + '&quot;) no-repeat left TOP;');
    document.write(&quot; }&quot;);
    document.write(&quot;</style>&quot;);
    }
    window.onload=changehead;
    </script> 
    und bei diesem divheader den onclick eingeschoben:

    PHP-Code:
    <div class='header section' id='header' onclick='changehead();'><div class='widget Header' id='Header1'
    aber jetzt gibt es Probleme beim Laden der Page. Hab ich in dem Fall was falsch gemacht?

  4. #4
    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 AW: Headerbild manuell ändern



    Jungs, was ihr da grad verzapft ist ganz Böse
    Für sowas benutzt man kein document.write() sondern editiert direkt die CSS Eigenschaften des Elements.

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Titel</title>
        
        <style type="text/css">
          #header
          {
            width: 740px;
            height: 185px;
            margin: auto;
            
            background-color: #000;
          
          }
        </style>
      
        <script type="text/javascript">
          function changeBG()
          {    
            var banner = new Array();
            var random;
            
            banner[0] = 'http://static.flickr.com/84/269053449_acad87a793_o.jpg'
            banner[1] = 'http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg'
            banner[2] = 'http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg'
            banner[3] = 'http://static.flickr.com/108/269053262_608edbdda4_o.jpg'
            banner[4] = 'http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg'
    
            
            do {
              random = Math.round(4 *Math.random());
            } while(document.getElementById('header').style.backgroundImage == 'url(' +banner[random] +')')
            
            document.getElementById('header').style.backgroundImage = 'url(' +banner[random] +')';
          }
        </script>
      </head>
      <body>
        <a href="#" onclick="changeBG();">
          <div id="header">
        
          </div>
        </a>
      </body>
    </html>
    Das a-Tag ist leider nötig, da der IE in machen Versionen onclick nur dort erkennt und leider immernoch viele veraltete Versionen nutzen.

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    20.06.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Headerbild manuell ändern

    Wunderbar, danke, scheint zu klappen.

    Nur gibt es jetzt so eine Art oranger Rahmen wenn man auf den Header klickt. Wie kann ich den noch eliminieren?

    Und ist es auch noch möglich mit einfachen Mitteln Effekte einzubauen beim Bildwechsel? Z.B. ein Fade-Effekt wäre ganz schön.

  6. #6
    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 AW: Headerbild manuell ändern

    Diese schönen Effekte von den du da Sprichst sind alle nicht ganz einfach
    Falls du es umbedingr haben willst, schau mal hier.

    Zu dem Problem mit der Umrandung, du kannst das onclick natürlich dem Div Element zuweisen, aber ich bin mir ziemlich sicher, dass es dann im IE <= 6 nicht funktioniert.
    Schau dir sonst mal Browserweichen an, damit könntest du es so basteln, dass bei allen modernen Browsern das onclick im div ist und nur beim IE <= 6 das a-Tag drumherum zu sehen ist.

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    20.06.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Headerbild manuell ändern

    Zitat Zitat von DarkSyranus Beitrag anzeigen

    Zu dem Problem mit der Umrandung, du kannst das onclick natürlich dem Div Element zuweisen.
    Wie müsste ich das genau befehlen direkt im DIV?

  8. #8
    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 AW: Headerbild manuell ändern

    Zitat Zitat von DarkSyranus Beitrag anzeigen


    Jungs, was ihr da grad verzapft ist ganz Böse
    Für sowas benutzt man kein document.write() sondern editiert direkt die CSS Eigenschaften des Elements.
    ui jo, htteich ganz übersehen, hab mirgar net ganz angesehen wie das ding in gänze funzt, nur gesehen, dass man des via function machen mus, damit man des onclick aufrufen kann....^^

    dickes sorry an dieser stelle
    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

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    20.06.2009
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Headerbild manuell ändern

    Soweit funktioniert es jetzt, doch eine Kleinigkeit stört noch:

    Kommt man auf die Seite ist das erste Bild das angezeigt wird im Header stets das Backgroundbild, in meinem Falle ist das schwarz. Nur wenn man draufklickt erscheint ein random header. Wie kann man das noch ändern dass von Anfang an ein random header angezeigt wird und nicht das background img?

  10. #10
    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 AW: Headerbild manuell ändern

    HTML-Code:
    <body onload="changeBG()">

Ähnliche Themen

  1. Textfeld manuell grösser machen
    Von anagramm im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 08.02.2009, 19:03
  2. Globale Reiter manuell festlegen
    Von Jope im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 4
    Letzter Beitrag: 06.08.2008, 14:32
  3. [Ubuntu] Dateisystem beschädigt, manuell reparieren?
    Von DarkSyranus im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 23.02.2008, 16:15
  4. Inhalte manuell zum globalen Reiter hinzufügen.
    Von 00eraser00 im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 5
    Letzter Beitrag: 28.08.2007, 12:34
  5. Forum manuell ausser Betrieb - und wieder aktivieren?
    Von Elen im Forum Webanwendungen - Webapplikationen
    Antworten: 2
    Letzter Beitrag: 24.03.2006, 14:18

Stichworte

Berechtigungen

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