# CSS bei onclick ändern



## Dustin84 (30. März 2010)

Hallo,

ich habe hier einen Link (Infoicon):

```
<a href="#'.$j.'" onclick="this.style.backgroundPosition = "0px -15px;" class="infoicon"><img src="/_standards/bilder/pixel.gif" width="15" height="15" alt="Mehr Informationen" title="Mehr Informationen" border="0"></a>
```

Beim klicken soll nun die Hintergrundgrafik um 15px verschoben werden, um das Icon auf aktiv zu setzen. Alternativ würde auch das ändern der Klasse in "infoiconaktiv" helfen.

So wie ich es nun probiert habe funktioniert es nicht.

Syntaxfehler oder bin ich komplett auf'n Holzweg?

Gruß D.


----------



## Maik (30. März 2010)

Moin,

wohin soll das Hintergrundbild verschoben werden? Nach links oder oben?



> Der erste Wert steht für die horizontale, der zweite für die vertikale Position.



Zitat-Quelle: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

Und existiert dort überhaupt ein Hintergrundbild? Das <img>-Element ist nämlich keines.

mfg Maik


----------



## Dustin84 (30. März 2010)

In der Klasse "infoicon" gibts ein Hintergrundbild. Ich habe auf das Icon schon ein Hover, was auch funktioniert.


----------



## Maik (30. März 2010)

http://www.tutorials.de/forum/javascript-ajax/356868-denkfehler.html#post1848790 - ab hier das Thema weiterlesen bis Post #8.

mfg Maik


----------



## Dustin84 (30. März 2010)

hm, also ich habs ein wenig anders *fast* zum laufen bekommen.

Link auf Infoicon:
$j ist der counter, da ich viele Icons habe.

```
<a href="#" id="icon_'.$j.'" onclick="infoicon('.$j.')" class="infoicon"><img src="/_standards/bilder/pixel.gif" width="15" height="15" alt="Mehr Informationen" title="Mehr Informationen" border="0"></a>
```
Darunter dann das Javascript:

```
// FUNKTION Infoicon Aktiv bzw. Inaktiv setzen
		function infoicon(nummer) {  
			<? for ($zaehlerInfoicon = 0; $zaehlerInfoicon < 30; $zaehlerInfoicon++) { ?>
				document.getElementById('icon_<? echo $zaehlerInfoicon; ?>').style.backgroundPosition = "0px 0px"; // Alle Icons deaktivieren
				document.getElementById('icon_'nummer').style.backgroundPosition = "0px -15px"; // Geklickte Icon aktivieren
			<? } ?>
		}
```


Das Problem ist die falsche Syntax. Wie binde ich den übergebenen Wert  *nummer* bei getElementById ein, so dass hinterher ('icon_9') im Quelltext steht?

Gruß
D.


----------

