# onClick -> Hintergrundfarbe wechseln?



## Suchfunktion (28. Juni 2007)

Hi,

ich moechte bei einem onClick-Event die Hintergrundfarbe des entsprechenden a-Tags aendern lassen.

[rot]->onClick->[gruen]->onClick->[rot]->usw.
(Also bei jedem Klick soll es auf die entsprechend andere Farbe wechseln..)

Problem:
Wenn ich die Seite aufrufe und auf den roten a-Tag klicke, faerbt er sich gruen.
Klicke ich allerdings nochmal drauf, passiert nichts. (-> Hier sollte sich die Farbe wieder zu rot [ursprungsfarbe] aendern.)

Hier mein Script:

```
<html>
<head>
  <script type="text/javascript">
    function activateItem(data){
      data.style.backgroundColor= data.style.backgroundColor='#900'?'#090':'#900';
    }
  </script>
</head>
<body>
  <a href="javascript:;" style="color:#fff; background-color:#900; padding:2px;" onclick="activateItem(this);">inaktiv</a></span>
</body>
</html>
```

Findet jemand den Fehler
(Habe es schon im Firefox, Netscape, IE, etc. ausprobiert.. ohne Erfolg.. :-( )


----------



## Enumerator (28. Juni 2007)

Moin!

Ich würde sagen, du hast DEN standart Schusselfehler gemacht: Die Bedingung des Ausdrucks ist eine Zuweisung...
	
	
	



```
data.style.backgroundColor= data.style.backgroundColor='#900'?'#090':'#900';
```
 ändern in 
	
	
	



```
data.style.backgroundColor= (data.style.backgroundColor=='#900')?'#090':'#900';
```

Gruß
Enum


----------



## Revenge1992 (29. Juni 2007)

hat auch irgendjemand ein Code dazu wie man das ganze in einem drop down feld machen kann? sprich sobald man auf ein wort im drop down feld klickt, dass sich dann das Hintergrundbild ändert? 

Ist ein bisschen abgeleitet vom eigentlichen Fall wollte aber keinen neuen Thread aufmachen. Hoffe das ist ok


----------



## Enumerator (29. Juni 2007)

Hi!

Genau das gleiche Prinzip:
	
	
	



```
<script type="text/javascript"><!--

function change()
{
	if(window.style)
	{
 		return window.style.backgroundImage = "url(bild.jpg)";
	}

	if(document.documentElement && document.documentElement.style)
	{
		return document.documentElement.style.backgroundImage = "url(bild.jpg)";
	}

	if(document.body && document.body.style)
	{
		return document.body.style.backgroundImage = "url(bild.jpg)";
	}  
}

--></script>

<select onclick="change();">
 <option> Alpa
 <option> Beta
 <option> Gamma
 <option> Delta
</select>
```

Ach ja, die Funktion "change();" ist so groß ausgefallen um sicherzugehen, dass es in möglichst vielen Browsern funktioniert. Einfacher wäre es, du weist dem <body>-Tag ein ID-Attribut zu (z.B. "body"), dann könnte das wie folgt aussehen:
	
	
	



```
function change()
{
	if(document.getElementById("body")
	{
		return document.getElementById("body").style.backgroundImage = "url(bild.jpg)";
	}  
}
```

Das onClick-Attribut des <select>-Feldes könntest du auch durch onChange oder onMouseDown ersetzen. Oder du versuchst, das Attribut nicht für das Feld, sondern für die <option>-Tags zu setzen. Was allerdings nicht in jedem Browser funktionieren wird...

Gruß
Enum


----------



## Enumerator (29. Juni 2007)

PS:

Natürlich musst Du das ganze nicht unbedingt auf das <body> Tag anwenden. Wenn Du mit IDs arbeitest, kannst Du so jedem Blockelement ein dynamisches Hintergrundbild verpassen...


----------



## Sven Mintel (29. Juni 2007)

es gibt ein weiteres Problem in diversen Browsern(bspw. Geckos):
Diese Verwalten Farbwerte intern im Format rgb(r,g,b), weswegen dein Vergleich dort nie funktionieren wird.

Kannst ja mal probieren 

```
<b style="background-color:#900" onclick="alert(this.style.backgroundColor)">fiese Falle</s>
```


Workaround: arbeite mit Klassen, zum Vergleich ziehe dann halt die Klassennamen heran.


----------



## Revenge1992 (29. Juni 2007)

Hallo, habe gerade versucht den Code mal ein bisschen zu bearbeiten. Aber effektiv hat es garnicht geklappt. ICh versteh das ganze nicht das soll ja hinterher so laufen dass wenn man auf einen z.B Designnamen im DropDown Feld klickt, dass sich dann das Hintergrundbild/Design ändert. Aber das klappt garnicht Oo


----------

