HTML: Zufälliges "Hinterfrund" Bild

Beitrag lesen

Hallo,

Ich versteh es trotzdem nicht, sorry. Kenn mich nicht soooo gut aus.
Kannst du mir vllt so ein Beispiel machen?
mit z.B. bild1.htm, bild2.htm usw.
Ich dachte du möchtest bei jedem Aufruf ein anderes (Hintergrund-)Bild haben und nicht bei jeder Seite?

Eine XHTML Seite mit dem Namen test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de-de" xml:lang="de-de">
<head>
<title>Zufallsheader Test</title>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="head"></div>
<script type="text/javascript">
  [code lang=javascript]( function () {
      var c = ['a','b','c','d','e','f','g','h','i','j','k'];
      document.getElementById('head').className = c[Math.round(Math.random()*c.length)];
    }
  ) ()


> </script>  
> </body>  
> </html>[/code]  
>   
>   
> Eine CSS-Seite mit dem Namen screen.css im gleichen Verzeichnis:  
> ~~~css
  

>   
> #head {  
>   background: url(default.jpg) top left no-repeat white;  
>   width: 500px;  
>   height: 200px;  
> }  
> /* Hier kommen die einzelnen verschiedenen Bilder (Klassen) */  
> #head.a { background-image: url(1.jpg); }  
> #head.b { background-image: url(2.jpg); }  
> #head.c { background-image: url(3.jpg); }

Die Bilder müssen im gleichen Verzeichnis sein wie die CSS Datei, damit sie so gefunden werden.

So wird bei jedem Aufruf der Seite in der JavaScript Funktion erst einmal eine Zufallszahl generiert. Diese Zahl wird dann zum hinzufügen der CSS-Klasse zum <div id="head"> element benutzt. Wenn die Klasse hinzugefügt wurde, wird das CSS dieser Klasse auf das Div angewendet. In der externen CSS-Datei werden die Klassen definiert, so dass jede Klasse ein anderes Hintergrundbild bekommt.

Grüße
Jeena Paradies

Boah geil. Danke. Vielen Dank, dass du dir die Mühe gemacht hast!