# Hintergrund änderung via mouseover



## VCF (24. Juli 2005)

Wenn das nicht das richtige Forum für diese sache ist, verschiebt meinen Beitrag bitte.

Ist es möglich, den gesamten Hintergrund meiner Homepage zu wechseln, wenn ich mit der Mouse über einen Link fahre ?

Bin bei der Suche auf nichts dergleichen gestoßen...
Bitte um Hilfe


----------



## Gumbo (24. Juli 2005)

Mit HTML allein wird soetwas nicht möglich sein. Setzest du jedoch noch zusätzlich JavaScript ein, wäre dies möglich.

Folgendes wäre beispielsweise möglich:
	
	
	



```
<<Elementbezeichner> onmouseover="document.getElementsByTagName('body')[0].style.backgroundColor='#fe0'" onmouseout="document.getElementsByTagName('body')[0].style.backgroundColor=null">
	…
</<Elementbezeichner>>
```


----------



## VCF (24. Juli 2005)

Tut mir leid....bin noch kompletter Anfänger !! Kenn mich da nicht so aus....


----------



## Gumbo (24. Juli 2005)

> Tut mir leid....bin noch kompletter Anfänger !! Kenn mich da nicht so aus....


Falls du etwas nicht verstanden hast, solltest du direkt nach einer Antwort fragen und keine subtilen Botschaften in irgendwelchen Aussagen verstecken.


----------



## VCF (25. Juli 2005)

Tut mir leid....

Kann ich diese script das du gepostet hasst, jetzt einfügen und es funktioniert dann, oder muss ich noch was drann ändern/hinzufügen etc.

Wenn was fehlt, könnte mir jemand dass gesamte script posten ?  

Bitte....Null ahnung von Java

Und nochwas....hab die ganze Sache etwas falsch formuliert.
Ich möchte das Hintergrundbild ändern....


----------



## Gumbo (25. Juli 2005)

> Null ahnung von Java


Java musst du auch nicht kennen, denn JavaScript ist _n?i?c?h?t_ Java.


Wenn du nun jedoch nicht nur die Hintergrundfarbe ändern möchtest, solltest du dem body-Element am besten temporär eine Klasse zuordnen:
	
	
	



```
<Elementbezeichner onmouseover="document.getElementsByTagName('body')[0].className += ' neue-Klasse'" onmouseout="document.getElementsByTagName('body')[0].className = document.getElementsByTagName('body')[0].className.replace(/neue-Klasse/, '')">
	…
</Elementbezeichner>
```
Die Hintergrundgrafiken kannst du nun über CSS definieren:
	
	
	



```
body {
	background:			…
}
body.neue-Klasse {
	background:			…
}
```


----------



## VCF (25. Juli 2005)

Und was bedeutet dieses <Elementbezeichner> ?


----------



## Gumbo (25. Juli 2005)

Das _<Elementbezeichner>_ soll als Platzhalter für einen tatsächlich existierenden Elementbezeichner (beispielsweise a für ein Hyperlink) stehen.


----------



## VCF (25. Juli 2005)

Irgenwas mach ich falsch  Kanns du mir vielleicht ein kleine Anleitung posten, vielleicht komm ich dahinter....

Nochmal zur erklärung:

Ich möchte das Hintergrundbild meiner Homepage ändern, bei Mouseover, und wieder zurücksetzten bei mouseout.

Es wär eine große Hilfe !!


----------



## Gumbo (26. Juli 2005)

Ein nun wirklich einfaches Beispiel:
	
	
	



```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<title>Beispieldokument</title>
<style type="text/css">
	<!--
	body {
		background:			#fff;
	}
	body.neue-Klasse {
		background:			#fe0;
	}
	-->
</style>
<p onmouseover="document.getElementsByTagName('body')[0].className+=' neue-Klasse'" onmouseout="document.getElementsByTagName('body')[0].className=document.getElementsByTagName('body')[0].className.replace(/neue-Klasse/, '')">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis.</p>
```


----------



## VCF (30. Juli 2005)

So...hatte leider erst jetzt wieder zeit mich mit diesem Thema zu befassen...

Dieses script wechselt doch wieder nur die Farbe meiner Hp, oder täusch ich mich !

Ich möchte aber mein Hintergrundbild (zb.ein Auto, Flugzeug...was auch immer) gegen ein Anderes (Auto....) wechseln !!


----------



## Maik (30. Juli 2005)

VCF hat gesagt.:
			
		

> Dieses script wechselt doch wieder nur die Farbe meiner Hp, oder täusch ich mich !


Korrekt, _Gumbo's_ Beispiel bezieht sich auf die Hintergrundfarbe. 



			
				VCF hat gesagt.:
			
		

> Ich möchte aber mein Hintergrundbild (zb.ein Auto, Flugzeug...was auch immer) gegen ein Anderes (Auto....) wechseln !!


Wenn eine Hintergrundgrafik getauscht werden soll, lautet der CSS-Code :


```
body 
{
background-image: url(verzeichnis/grafik1.jpg);
}

body.neue-Klasse 
{
background-image: url(verzeichnis/grafik2.jpg);
}
```


```
<!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">
<title></title>

<style type="text/css">
<!--
body 
{
background-image: url(verzeichnis/grafik1.jpg);
}

body.neue-Klasse 
{
background-image: url(verzeichnis/grafik2.jpg);
}
-->
</style>

</head>
<body>

<p onmouseover="document.getElementsByTagName('body')[0].className+=' neue-Klasse'" onmouseout="document.getElementsByTagName('body')[0].className=document.getElementsByTagName('body')[0].className.replace(/neue-Klasse/, '')">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis.</p>

</body>
</html>
```


----------

