✔ Background-color im Body soll bei hover wechseln

1

1023839

Grünschnabel
Hallo,
ich möchte folgendes Problem lösen:

Beim Überfahren eines Textfelds, soll sich die Hintergrundfarbe des bodys ändern und beim Verlassen des Textfeldes wieder zurück verwandeln.

In einem alten Webbeitrag habe ich folgenden Vorschlag gefunden:


HTML: 
<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: green 0 0 no-repeat;
		}
		p {
			top: 270px;
			left: 430px;
			position: fixed;
		}
		 //-->
		</style>
	</head>
	<body id="body">
		<p><a href="#" onmouseover="swapBackground('red.gif');" onmouseout="swapBackground('green');">button</a></p>
	</body>
</html>


Das klappt soweit auch alles. Allerdings möchte ich nicht ein Bild hinterlegen, sondern die Hintergrundfarbe ändern. Vermutlich liegt der Fehler in der 8-10 Zeile?!
Kann mir jemand sagen, was ich stattdessen angeben muss?

Liebe Grüße Joelle
 
HTML: 
<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) {
                    if(document.getElementById('body').style.backgroundColor=='red'){
		        document.getElementById('body').style.backgroundColor = "blue";
                    }else{
                        document.getElementById('body').style.backgroundColor = "red";
                    }
		}
		 //-->
		</script>
		<style type="text/css">
		  <!--
		body{
		    background: green 0 0 no-repeat;
		}
		p {
			top: 270px;
			left: 430px;
			position: fixed;
		}
		 //-->
		</style>
	</head>
	<body id="body">
		<p><a href="#" onmouseover="swapBackground('red.gif');" onmouseout="swapBackground('green');">button</a></p>
	</body>
</html>

meinst du das?
 
Zuletzt bearbeitet:
super! das klappt!
allerdings kann ich die hintergrundfarbe nur als namen angeben (green, blue, black...) ich müsste sie aber als auch als solche angeben können: #83c6a9

sobald ich die farbnummer mit der # angebe springen die hintergründe nicht mehr um:
ich habs mit deinem html-code probiert. bei der farbe blue konnte ich z.b. #191919 eingeben und es ging. sobald ich aber an der stelle wo die beiden red stehen z.b. #83c6a9 eingebe, springt die farbe nach dem ersten überfahren nicht mehr zurück.

woran liegt das?
 
Zuletzt bearbeitet:
Die Funktion macht so aber keinen Sinn.

Es wird beim MouseOver der Name eines Bildes übergeben und beim MouseOut "nur" die gewünschte Farbe. In der Funktion wird dieser Parameter dann aber gar nicht verwendet.

Kürze es doch ab un schreib es so:

HTML: 
<p><a href="#" onmouseover="javascript:document.getElementById('body').style.backgroundColor = 'blue';" onmouseout="javascript:document.getElementById('body').style.backgroundColor = 'green';">button</a></p>

Dann kannst du dir die Funktion komplett sparen.

Habe hier zwar auch die Farbnamen stehen aber du kannst sie auch '#83c6a9' so angeben!"
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück