Hintergundbild per Link verändern

B

belite

Grünschnabel
Hallo,

mich interessiert, ob es überhaupt möglich ist ein Background-images im body-tag auszutauschen?
Meine Überlegung war: ein Link , der durch MouseOver-Effekt "aktiviert" wird, löst den Bildhintergrundwechsel aus. Ich dachte, dass dies einfach wie z.B. im Flash nach dem Prinzip des _root funktionieren würde. Scheinbar nicht.
Der Bildwechsel ist nicht das Problem, nur die Kopplung an den Text-Link, der darüber liegen soll. (Hab div-container und ähnliches ausprobiert, aber da hört mein fachwissen schon auf..) Gibt´s eine einfache Lösung, die ich grad nicht sehe?
Danke schon mal..
 
Zuletzt bearbeitet:
Hallo!

Als neuen User möchte ich Dich bitten Dich an den Punkt 15 unserer Netiquette bzgl. Deiner durchgängigen Kleinschreibung zu halten.
Danke!

Gruss Dr Dau
 
Hi,

poste am besten mal, was Du probiert hast, dann können wir schauen, wo's denn hakt.

Und achte in Deinen Beiträgen bitte auf die Groß-/Kleinschreibung gemäß Punkt 15 unserer Netiquette, der Du bei Deiner Registrierung zugestimmt hast. Vielen Dank.

LG
 
Hi,

mit CSS alleine kommst du da aber nicht weit, denn hierfür wird Javascript benötigt, und das Thema somit im Fachbereich platziert :)

Hier ein kleines gestricktes Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-06-18">

<title>tutorials.de | demo_belite</title>

<style type="text/css">
body#bg {
background-image:url(grafik_1.png);
}
</style>

<script type="text/javascript">
function changeBackground () {
    document.getElementById("bg").style.backgroundImage = "url(grafik_2.png)";
}
</script>

</head>
<body id="bg">

<ul>
    <li><a href="#" onmouseover="changeBackground()">Wechsel Hintergrund</a></li>
</ul>

</body>
</html>


mfg Maik
 
danke schon mal..
vorab.. das ist meine demo ;) >> http://be-lite.piranho.de/
wenn man den Link von oben oder links daneben anfährt und in die selbe Richtung zurückweicht, ist der Effekt dargestellt den ich meinte.. ("das Leuchten des Hintergrunds")

den Code hab ich angewandt, nur das er eben der MouseOutEffekt bei dem normalen Link einsetzt. Aber ich versuch den Rest mal hinzubekommen.. danke schön.
 
mhm. einfacher gedacht als getan.
Wie komme ich durch MouseOut zu dem body-background-Bild zurück?
Ich dachte in dem ich
<a href="#" onmouseover="changeBackground()" onMouseOut=" ..."> festlege.
 
Mit einer "Wenn-Dann-Bedingung" würde ich meinen :)

Javascript: 
function changeBackground() {
    obj = document.getElementById("bg");
    if (obj.style.backgroundImage == "url(grafik_2.png)"){
    obj.style.backgroundImage = "url(grafik_1.png)";
    }
    else {
    obj.style.backgroundImage = "url(grafik_2.png)";
    }
}
HTML: 
<a href="#" onmouseover="changeBackground()" onmouseout="changeBackground()">


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück