Hintergrundbild per Klick ein- und ausblenden?

[Ogi]

Nabend zusammen,

der Titel sagt eigentlich eh schon alles. Würde gerne auf meiner Seite eine Funktion einbinden, die es ermöglicht, per Klick auf einen Button ein bestimmtes HG-Bild einzublenden, beim erneuten Klick das Bild wieder verschwinden zu lassen.

Geht sowas und wenn ja, wie?

Danke,

O.

[Gernot Back]

Hallo Ogi,

der Titel sagt eigentlich eh schon alles. Würde gerne auf meiner Seite eine Funktion einbinden, die es ermöglicht, per Klick auf einen Button ein bestimmtes HG-Bild einzublenden, beim erneuten Klick das Bild wieder verschwinden zu lassen.

Geht sowas und wenn ja, wie?

Klar geht das; entweder indem du mit JavaScript eine passende Style-Eigenschaft des Elements änderst, dem du das Hintergrundbild verpassen willst (durch Zuweisung einer leeren Zeichenkette kannst du die Default-Werte wieder herstellen und bezüglich Hintergrundbildern ist ja defaultweise erstmal keines da) oder du änderst den Klassennamen dynamisch, ebenfalls mit JavaScript.

Gruß Gernot

[Gunnar Bittersmann]

der Titel sagt eigentlich eh schon alles.

Ogi,
Der Themenbereich auch. ;-) Mit HTML geht das nicht. Eine clientseitige Realisierung mit JavaScript bietet sich an.

(Serverseitige Realisierung für Nutzer ohne JavaScript ist wohl nicht nötig, da das Hintergrundbild als schmückendes Beiwerk nun so wichtig nicht ist.)

Würde gerne auf meiner Seite eine Funktion einbinden, die es ermöglicht, per Klick auf einen Button […]

Du willst also auf dieses Ereignis mit dem passenden http://de.selfhtml.org/javascript/sprache/eventhandler.htm@title=Event-Handler reagieren.

[…] ein bestimmtes HG-Bild einzublenden, beim erneuten Klick das Bild wieder verschwinden zu lassen.

Die Reaktion besteht also in der Änderung von http://de.selfhtml.org/javascript/objekte/document.htm@title=document.http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName("body")[0].http://de.selfhtml.org/javascript/objekte/style.htm@title=style.http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=backgroundImage

In einem Flag (initial visible = false;) kannst du dir den Zustand merken.

function changeVisibility() {  
  if (visible) { /* schalte Bildanzeige aus */ }  
  else { /* schalte Bildanzeige ein */ }  
  visible = !visible; /* Änderung des Zustandsanzeigeflags */  
}

Live long and prosper,
Gunnar

[Ashura]

Hallo Gunnar.

Die Reaktion besteht also in der Änderung von http://de.selfhtml.org/javascript/objekte/document.htm@title=document.http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=getElementsByTagName("body")[0].http://de.selfhtml.org/javascript/objekte/style.htm@title=style.http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften@title=backgroundImage

Oder gleich document.[ref:self81;javascript/objekte/htmlelemente.htm#body@title=body].style.backgroundImage

Einen schönen Dienstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Oder gleich document.[ref:self81;javascript/objekte/htmlelemente.htm#body@title=body].style.backgroundImage

Natürlich besser, danke.

Ich glaube, ich hatte sogar http://de.selfhtml.org/javascript/objekte/htmlelemente.htm beim Wickel, und das doch übersehen.

Live long and prosper,
Gunnar

[Manuel]

antwort wurde ja eigentlich schon gesagt.
sollte dir javascript nicht behagen kannst du dies in php (u.a.) folgendermaßen machen:

<?php
$style = (isset($_GET['style'])) ? $_GET['style'] : false;

switch($style) {
 case 'hg1':
  echo '<style type="text/css">body {background: url(bild.jpg);</style>';
  break;
 case 'hg2':
  echo '<style type="text/css">body {background: none;}</style>';
  break;
 default:
  echo '<style type="text/css">body {background: url(bild.jpg);</style>';
}
?>

<a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=hg1">HG an</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?style=hg2">HG aus</a>

[Manuel]

Ach shit ich hab bei hg1 und default im php teil die '}' vergessen