Liebe/-r Experte/-in,
Ich habe auf meiner Homepage (Unterseite „Hintergründe“)einige selbstgemachte Hintergrundkacheln ausgestellt. Wie erreiche ich es daß sich der gesamte Hintergrund dieser Seite ändert wenn ich auf die jeweilige Kachel klicke? Könnt ihr mir vielleicht einen Beispiel-Tag für eine meiner Kacheln schreiben?
http://www.beepworld.de/members29/werner25/
Vielen Dank für euere Hilfe!
Werner
Hallo Werner,
es gibt ja oft viele Wege um ein Ziel zu erreichen.
Hier ist einer davon…
…definiere für das Bild ein „onclick“-Event (Ereignis):
Info:
Mit dem Parameter „this“ wird das Bild (DOM-Objekt) an deine Javascript-Funktion übergeben.
Dadurch hast du in der Javascript-Funktion Zugriff auf das Bild-Objekt.
Deine Javascript-Funktion ging schon in die richtige Richtung:
function HintergrundbildWechseln(Hintergrundbild) {
// die Bildquelle (src) dem body-Hintergrund zuweisen
document.getElementsByTagName(‚body‘)[0].style.background = „url(’“ + Hintergrundbild.src + „’)“;
}
Das war’s eigentlich schon.
Tipps:
verwende die CSS-Eigenschaft „cursor“ zum anzeigen von Links
z.B.
Dadurch wird eine „Hand“ als Mauszeiger angezeigt, wenn man mit der Maus über das Bild geht.
Somit signalisiert man dem Besucher der Seite, dass hier etwas angeklickt werden kann.
verwende für die CSS url()-Notation immer Hochkommas um die Grafik anzugeben
z.B. statt „background:url(/iregend/eine/url);“ besser „background:url(’/iregend/eine/url’);“
Bei bestimmten URL’s (z.B. mit enthaltenen Leerzeichen) und Browsern, wird sonst die URL nicht erkannt.
Du verwendest eine alte Art der Javascript-Definition:
Verwende besser: <script type=„text/javascript“>
Oder zur Not auch Beides: <script language=„JavaScript“ type=„text/javascript“>
Liebe Grüße
Jens
<small>[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]</small>