nicht angemeldet
Für jeden Monat ein eigenes Hintergrundbild
0 2 
Gunnar Bittersmann
Für jeden Monat ein eigenes Hintergrundbild
Hallo zusammen,
ich bin auf der Suche nach einer Lösung für eine HTML Seite.
Und zwar möchte ich mittels JS und CSS für jeden Monat ein eigenes Hintergrundbild für eine Seite haben.
(Ohne dass ich jeden Monat eine andere Datei uploaden muss.)
Was ich bisher zusammengebastelt habe ...
<script language=javascript>
function bgwechsel() {
aktDatum= new Date();
var monat = aktDatum.getMonth()+1;
var noi = 12;
bild = new Array(noi+1);
bild[1] = 'januar.jpg';
bild[2] = 'februar.jpg';
bild[3] = 'maerz.jpg';
bild[4] = 'april.jpg';
bild[5] = 'mai.jpg';
bild[6] = 'juni.jpg';
bild[7] = 'juli.jpg';
bild[8] = 'august.jpg';
bild[9] = 'september.jpg';
bild[10] = 'oktober.jpg';
bild[11] = 'november.jpg';
bild[12] = 'dezember.jpg';
document.getElementByTagName('body').style.backgroundImage= 'url('+ bild[monat]+')';
}
//-->
</script>
<body onload=bgwechsel()>
Leider funktioniert das nicht wie gewünscht und ich stehe auf dem Schlauch.
Bei Tante Google bin ich auch bisher nicht wirklich fündig geworden.
Würde mich freuen, wenn Ihr meinen grauen Zellen mal auf die Sprünge helfen könntet.
-
Hallo,
Leider funktioniert das nicht wie gewünscht und ich stehe auf dem Schlauch.
Bei Tante Google bin ich auch bisher nicht wirklich fündig geworden.Würde mich freuen, wenn Ihr meinen grauen Zellen mal auf die Sprünge helfen könntet.
Deine Problembeschreibung funktioniert auch nicht. Wieso sagst du nicht, ob es Fehlermeldungen gibt?
Wenn ich das in Firebug ausprobiere, bekomme ich Fehlermeldungen. Die solltest du dir auch mal ansehen.
Gruß
Alex -
@@Frechdachs:
nuqneH
<script language=javascript>
Welche HTML-Version verwendest du? Bei HTML 4.01/XHTML 1.x ist @type="text/javascript" erforderlich; bei (X)HTML5 nicht mehr. Das @language-Attribut ist auf jeden Fall sinnlos.
var monat = aktDatum.getMonth()+1;
Tja, JavaScript begeht (wie andere Umgebungen auch) die Dummheit, Montage von 0 bis 11 zu zählen.
Aber wenn das schon mal so ist, kann man sich diesen Index auch gleich zunutze machen und die Bilddateinamen im Array auch von 0 bis 11 zählen lassen …
var noi = 12;
bild = new Array(noi+1);… also nicht 1 addieren. Die Angabe der Größe eiens Arrays ist in JavaScript übrigens nicht erforderlich.
Und <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=globale Variablen> sind pfui.
bild[1] = 'januar.jpg';
bild[2] = 'februar.jpg';
bild[3] = 'maerz.jpg';
bild[4] = 'april.jpg';
bild[5] = 'mai.jpg';
bild[6] = 'juni.jpg';
bild[7] = 'juli.jpg';
bild[8] = 'august.jpg';
bild[9] = 'september.jpg';
bild[10] = 'oktober.jpg';
bild[11] = 'november.jpg';
bild[12] = 'dezember.jpg';Dafür kannst du auch kürzer schreiben (Index von 0 bis 11):
var bild = ['januar.jpg', 'februar.jpg', 'maerz.jpg', 'april.jpg', 'mai.jpg', 'juni.jpg', 'juli.jpg', 'august.jpg', 'september.jpg', 'oktober.jpg', 'november.jpg', 'dezember.jpg'];document.getElementByTagName('body').style.backgroundImage= 'url('+ bild[monat]+')';
Und hier tritt der von Alex erwähnte Fehler auf. Allerdings ist es sinnlos, sich das 'body'-Element auf diese Weise aus dem DOM rauszusuchen; es steht bereits mit
document.bodyzur Verfügung.//-->
HTML-Kommentare haben in JavaScript-Code nichts zu suchen, weg damit!
<body onload=bgwechsel()>
Die Anführungszeichen um Attributwerte dürfen nur unter ganz bestimmten Bedingungen entfallen. [HTML401 §3.2.2] Diese sind hier nicht gegeben.
Was ist eigentlich, wenn kein JavaScript ausgeführt wird? Kein Hintergrundbild?
Ich würde das ganze aber doch eher anders lösen und nicht JavaScript und CSS vermischen. Mit JavaScript setzt du lediglich eine Klasse:
document.body.className += ' month' + (new Date().getMonth() + 1);und notierst die Bilder im Stylesheet:
body {background: url(fallback.jpg)} /* Hintergrundbild, wenn kein JavaScript ausgeführt wird */ body.month1 {background: url(januar.jpg)} body.month2 {background: url(februar.jpg)} body.month3 {background: url(maerz.jpg)} body.month4 {background: url(april.jpg)} body.month5 {background: url(mai.jpg)} body.month6 {background: url(juni.jpg)} body.month7 {background: url(juli.jpg)} body.month8 {background: url(august.jpg)} body.month9 {background: url(september.jpg)} body.month10 {background: url(oktober.jpg)} body.month11 {background: url(november.jpg)} body.month12 {background: url(dezember.jpg)}Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Moin Moin!
Wie immer die reine Lehre, sauber und ordentlich.
Was ist eigentlich, wenn kein JavaScript ausgeführt wird? Kein Hintergrundbild?
Ich würde das ganze aber doch eher anders lösen und nicht JavaScript und CSS vermischen. Mit JavaScript setzt du lediglich eine Klasse:
Sofern die Seite auf dem Server irgendwie zusammengebaut wird, sei es per Server Side Includes, PHP, Perl oder über irgendeine andere Technik, würde ich die Klasse serverseitig setzen; dann funktioniert es komplett ohne Javascript.
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".-
Hallo,
Sofern die Seite auf dem Server irgendwie zusammengebaut wird, sei es per Server Side Includes, PHP, Perl oder über irgendeine andere Technik, würde ich die Klasse serverseitig setzen; dann funktioniert es komplett ohne Javascript.
Dafür muss der Server aber jede einzelne Seite bei jedem Aufruf neu zusammenbauen und das frisst Strom und ist langsammer.
Jeena
-
-
@@Gunnar Bittersmann:
nuqneH
[…] Montage von 0 bis 11 zu zählen.
Äh – Monate.
Wie wusste schon meine Oma zu sagen: Mon macht dumm.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-