✔ Background-image im Body soll bei hover wechseln

Status
Nicht offen für weitere Antworten.
knutkowalski

knutkowalski

Mitglied
Hallo,

ich möchte folgendes Problem lösen:

Wenn ich bei der Navigation über einen Navigationspunkt "hovere" soll sich das Hintergrundbild der Website ändern.

Da die Seite auch im IE6 laufen muss, würde ich etwas Javascript in Kauf nehmen.

Wie mache ich das? Ich habe dafür bisher keine Lösung gefunden.
 
Hi,

für dein Vorhaben benötigst du so oder so Javascript, weshalb ich den Thread anschliessend auch ins passende Forum verschiebe, denn es existiert in CSS kein Selektor für Elternelemente, um im Dokumentbaum das <body>-Element aus seinem Dokumentkörper heraus ansprechen zu können (vom Navigationspunkt aus betrachtet).

Das Ganze könnte mit JS beispielsweise so ablaufen:
Javascript: 
function swapBackground() {
        document.getElementById('body').style.background = "url(bgImage2.jpg)";
}
CSS: 
body#body {
background:url(bgImage1.jpg);
}
HTML: 
<body id="body">
      <a href="#" onmouseover="swapBackground();">link</a>
</body>


mfg Maik
 
Vielen Dank für die Antwort!

Kann ich entsprechend dem Code auch das background-image in einer Box ändern?
Z.B. in der id="content", wenn ich die id entsprechend ändere:
body#body in body#content und <body id="body"> in <body id="content">?

Gruß
knutkowalski
 
Hi,

du musst die ID allerdings ins entsprechende Element einfügen (DIV, P usw), nicht in den body-Tag.

Ciao
Quaese
 
Jipp, das hat schon mal geklappt!
Javascript ist nicht nämlich meine Stärke...

Da ich die letzten 2 Antworten noch nicht gelesen hatte, habe ich die id noch im body-tag. Läuft. Werde die andere Variante auch noch probieren.

Was muss ich nun tun, damit das Bild wieder verschwindet, wenn der cursor "hover" verlässt? Dann soll das ursprüngliche background-image wieder da sein.

Sorry, das es etwas bruchstückhaft bei mir weitergeht!
Mein Ziel ist eine Navigation, bei der bei "hover" über den jeweiligen Navigationspunkt das background-image der jeweiligen Seite erscheint.

Wie bezeichne ich das, es sind ja ca. 7 Punkte.mit 7 unterschiedlichen Bildern?

Schon mal vielen Dank für eure Geduld!
 
Hi,

um den Ausgangszustand wieder herzustellen, verwendest du den onmouseout-Event.

Um flexibler zu sein, wird die Funktion swapBackground dahingehend abgeändert, dass sie beim Aufruf einen Parameter entgegennehmen kann. Diesem wird die Quelle des neuen Hintergrundbildes übergeben.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function swapBackground(strImg) {
	document.getElementById('body').style.backgroundImage = "url("+strImg+")";
}
 //-->
</script>
<style type="text/css">
  <!--
body{
	background: url(bild0.jpg) 0 0 no-repeat;
}
 //-->
</style>
</head>
<body id="body">
<a href="#" onmouseover="swapBackground('bild1.jpg');" onmouseout="swapBackground('bild0.jpg');">link 1</a>
<a href="#" onmouseover="swapBackground('bild2.jpg');" onmouseout="swapBackground('bild0.jpg');">link 2</a>
</body>
</html>

Ciao
Quaese
 
Das klappt alles ganz hervorragend!

Ganz herzlichen Dank für die Hilfe!!

Ich weiss bei Javascript oft ungefähr den Begriff, den ich einsetzen muss, kann das Script aber nicht selbstständig richtig formulieren. Daher bin ich auf Hilfestellung angewiesen .

Ich wünsche ein sonniges Wochenende!
:):):)
knutkowalski
 
...ich muss noch eine nachträgliche Frage einfügen zu einem neu entstandenem Problem:

Das erste Hintergundbild liegt in folgender Box:
Code: 
#content_wrapper {
   width:750px;
   background-image:url(images/hintergrund1.jpg);
   background-repeat:no-repeat;
   background-color:#CCCCCC;
}


Nachdem ich mit "hover" über das Bild gegangen bin, wird background-repeat:no repeat nicht mehr angenommen. Das Bild kachelt sich.
Und zwar das angezeigte Hintergrundbild und das bei "hover" erscheinende.

Woher kommt das? Liegt es am Javascript?
:confused:

knutkowalski
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück