nicht angemeldet
mit JS das hintergrundbild aendern
Hi Javascripter!
Ich versuche mithilfe von JS die CSS eigenschaft backgroundImage zu aendern. Leider bin ich nicht auf die richtige Syntax gekommen, da die Definition in CSS relativ ungewoehnlich ist (siehe link)
waere schoen, wenn mir jemand helfen koente.
P.S. hab leider keine Umlaute auf der Tastatur also wundert euch nicht.
-
hallo,
Ich versuche mithilfe von JS die CSS eigenschaft backgroundImage zu aendern.
Das ist ein bißchen schwierig. Beides, also sowohl CSS wie auch Javascript, sind voneinander unabhängige Konzepte, die allerdings gemeinsam von einem HTML-Dokument in Anspruch genommen werden können.
Ein Lösungsansatz könnte folgendermaßen aussehen: du schreibst deine HTML-Seite vollständig (mindestens bis dorthin, wo du dein Hintergrundbild bestimmst), also inclusive CSS-Formatierung, mit "document.write" in eine externe Datei. Für den Fall, daß jemand Javascript deaktiviert hat, mußt du dir die Arbeit doppelt machen und den gesamten Content trotzdem in dein HTML-Dokument reinwurschteln - mit einem unveränderlichen Hintergrund.
Es ist dir ein Leichtes, noch eine Funktion "changeCSS()" in deine externe Javascript-Datei einzufügen. Wer kein Javascript aktiviert hat, bekommt eh nix davon mit, der muß leider auf dieses Feature verzichten.
Die Frage ist, warum du das mit Javascript machen willst. Es liegt der Verdacht nahe, daß dieser "Wechsel" von irgendeinem Ereignis (Mausklick?) abhängig sein soll. Gegebenenfalls ist es einfacher, bei Eintritt dieses Ereignisses einfach eine andere anders CSS-formatierte Seite aufzurufen.
Leider bin ich nicht auf die richtige Syntax gekommen, da die Definition in CSS relativ ungewoehnlich ist
öhm ... daran ist nichts ungewöhnlich.
Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|-
hallo,
Ein Lösungsansatz könnte folgendermaßen aussehen: du schreibst deine HTML-Seite vollständig (mindestens bis dorthin, wo du dein Hintergrundbild bestimmst), also inclusive CSS-Formatierung, mit "document.write" in eine externe Datei. Für den Fall, daß jemand Javascript deaktiviert hat, mußt du dir die Arbeit doppelt machen und den gesamten Content trotzdem in dein HTML-Dokument reinwurschteln - mit einem unveränderlichen Hintergrund.
Es ist dir ein Leichtes, noch eine Funktion "changeCSS()" in deine externe Javascript-Datei einzufügen. Wer kein Javascript aktiviert hat, bekommt eh nix davon mit, der muß leider auf dieses Feature verzichten.
Die Frage ist, warum du das mit Javascript machen willst. Es liegt der Verdacht nahe, daß dieser "Wechsel" von irgendeinem Ereignis (Mausklick?) abhängig sein soll. Gegebenenfalls ist es einfacher, bei Eintritt dieses Ereignisses einfach eine andere anders CSS-formatierte Seite aufzurufen.
Ich will nicht bestreiten, daß dies eine Lösungsansatz ist, sogar eine durchführbare Lösung darstellt. Aber es keimt doch der Verdacht in mir:
"...Freunde! Seit nicht dumm! Die Welt ist rund! Greifen wir den Feind von hinten an!..."
Um doppelte Arbeit zu vermeiden, gar eine ganze Seite mit document.write() auszugeben, ist dabei lediglich auf das Attribut style mittel JS zuzugreifen:
http://selfhtml.teamone.de/javascript/objekte/style.htmÜber [objekt].style.backgroundImage="neu/dieda.jpg" kann dann das Bild geändert werden. Sollte es aber nur um ein Bildwechsel gehen, wenn mit der Maus darüber gezeigt wird, bietet sich immer css (a:hover) an!
Gruß aus Berlin!
eddi-
Berichtigung:
[objekt].style.backgroundImage="url(neu/dieda.jpg)"
sorry ;)
Gruß aus Berlin!
eddi-
hi,
Berichtigung:
[objekt].style.backgroundImage="url(neu/dieda.jpg)"schon gut. Und "...Freunde! Seid nicht dumm! Die Welt ist rund! Greifen wir den Feind von hinten an!..." war wirklich eine erhelledne Bemerkung ;-)
Grüße aus Berlin
Christoph S.
--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:| -
Vielen Dank fuer die Antwort,
Aber mit welchem Befehl greife ich auf das [object] body zu?
-
Re:
Aber mit welchem Befehl greife ich auf das [object] body zu?
Per ID http://selfhtml.teamone.de/javascript/objekte/document.htm#get_element_by_id in der Form:
<body id="hier">
<div>
<script type="text/javascript">
document.getElementById("hier").style.backgroundImage="....."
</script>
</div>Per Tag http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_tag_name in der Form:
<body>
<div>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.backgroundImage="....."
</script>
</div>Per Event-Handler + this-Parameter und einer Funktion:
<script type="text/javascript">
function anders(v) {v.style.backgroundImage="....."}
</script>
</head>
<body onclick="anders(this)">
<!-- onclick ist ein dummes Beispiel sorry -->Das scheinen mir die sinnvollsten Möglichkeiten zu sein. Habe sie jetzt einfach nur da niedergestammelt - werden sicher noch ein paar Fehler enthalten.
Gruß aus Berlin!
eddi
-
-
-
-