Ausgangszustand (Bild Farbe) wiederherstellen

Jochen · 15. Dezember 2016

Wenn ich mit der Maus über die einzelnen Links gehe, ändert sich die Farbe im Container und die Bilder.

Wenn ich die einzeln Links mit der Maus verlasse, bleibt der augentliche Zustand bestehen. Ich möchte aber bei mouseout den Ausgangszustand wieder herstellen. Zum Beispiel soll der Container wird in Blau erscheinen statt in einer der Farben aus dem Array(siehe unten).
Ich weiß, dass ich dies mit Display: none machen kann. Ich möchte aber nicht bei jedem einzelnen Link dies realisieren sondern generell wenn ich den Navigationsbereich mit der Mouse verlasse, egal auf welchem Link ich zuletzt mit der Maus war.

Hier der Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>

ul#navmenu {
margin-top:2px;
width: 1050px;
height:35px;
background-color:#F7BE81;
float:left;
border: 2px solid red;
}

ul#navmenu li{
margin-right: 5px;
width: 125px;
text-align:left;
position: relative;
float: left;
border: 1px solid blue;
}

ul#navmenu a{
padding-left: 3px;
text-decoration:none;
width: 125px;
height: 35px;
line-height: 35px;
background-color: #F7BE81;
color:black;
display: block;}

#container{ float: left; width: 400px; height:400px; background: blue;}

</style>

var BildListe = new Array();
BildListe[0] = "bild0.png";
BildListe[1] = "bild1.png";
BildListe[2] = "bild2.png";
BildListe[3] = "bild3.png";

var Bilder = new Array()
function Vorladen01() {for (i = 0; i < BildListe.length; i++) {Bilder[i] = new Image();Bilder[i].src = BildListe[i]; }}

Vorladen01();

function bildanzeigen(id) {document.getElementById("dasbild").src = Bilder[id].src;}

function faerbe(id)
{
var farben = new Array('#aa3','#aa6','#aa9','#aac','#aaf','#abf');
document.getElementById('container').style.backgroundColor=farben[id];
}

</script>
</head>

<li><a href="#"onmouseover="faerbe(5) ;">here</a></li>
</ul>
</li>
<li><a href="#"onmouseover="faerbe(6);">today</a></li>
</ul>

</body>
</html>

Ich hoffe ich konnte meine Frage deutlich machen.

LG
Jochen

Sempervivum · 15. Dezember 2016

Speichere die Originalfarbe und das Originalbild in einem Data-Attribut:

HTML

<img id="dasbild" src="bild3.png" data-o-image="bild3.png" data-o-color="#345678" width="300" height="350">

und registriere ein Mouseout-Event. Dann kannst Du die Original-Eigenschaften mit getAttribute() auslesen:

JavaScript

var ocolor = document.getElementById("dasbild").getAttribute("data-o-color");

Edit: Mir fällt gerade auf, dass Du ja offenbar nur von dem Bildcontainer die Farbe und das Bild zurück setzen willst. Dann sind diese immer die selben und Du kannst sie hart im Javascript kodieren.

Jochen · 15. Dezember 2016

Habe einen Ansatz im Netz gefunden. Ist zwar eine Krücke, aber funktioniert.

LG

Jochen

Jav · 15. Dezember 2016

Ich hatte jetzt an eine setDefaults-Funktion gedacht, die bei onmouseout in jedem Link aufgerufen wird. Da aber meine Tests nicht wirklich zufriedenstellend waren (das Zurücksetzen geschieht dann natürlich auch, wenn die Maus auf die Border kommt und bevor ein anderer Link das Bild neu setzt, was zu unschönem Geflackere führt), hätte mich der Ansatz jetzt auch interessiert.

Jochen · 15. Dezember 2016

Meine Lösung ist keine richtige Lösung, ist auch nicht in meinem ursprünglichem Sinn. Jedesmal wenn ich auf einen der Links komme lösche ich das Startnbild. Ich habe diesen Weg gewählt weil ich zu der Meinung gelangt bin, dass meine Wuschlösung nicht realisierbar ist. Und du scheinst das ja auch gerade zu bestätigen.

Anyway, herzlichen Dank

Jochen

Ausgangszustand (Bild Farbe) wiederherstellen

Jetzt mitmachen!

Teilen