Headerbild manuell ändern

RoyalArsenal

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

<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>

Alles anzeigen

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

synaptic

ja gibt es...

HTML

<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>

Alles anzeigen

und dann musste beim headerdiv nur noch nen onclick reinstopfen

HTML

<div id="header" onclick="changehead();"></div>

RoyalArsenal

Danke, hab es jetzt mal so eingebaut:

PHP

<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(' background:url(&quot;' + banner[random] + '&quot;) no-repeat left TOP;');
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
}
window.onload=changehead;
</script>

Alles anzeigen

und bei diesem divheader den onclick eingeschoben:

PHP

<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?

DarkSyranus

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

<!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>

Alles anzeigen

Das a-Tag ist leider nötig, da der IE in machen Versionen onclick nur dort erkennt und leider immernoch viele veraltete Versionen nutzen.

RoyalArsenal

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.

DarkSyranus

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.

RoyalArsenal

Zitat von DarkSyranus

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?

synaptic

Zitat von DarkSyranus

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

RoyalArsenal

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?

DarkSyranus

HTML

<body onload="changeBG()">

thilda

Den Rand solltest du über eine einfache css-anweisung

Code

border: 0;

wegbekommen

Tags