CSS-Klasse in einem "<img>" -Tag ändern

[Samy]

Hallo,

angenommen ich habe 2 CSS-Klassen:

.k1 { border: 1px solid black; }
  .k2 { border: 2px dashed red; }

eine JavaScript-Funktion:

function ChangeClass(imgID,modus) {
    var obj = document.getElementById(imgID);

switch(modus) {
      case 1:
        //Ändere CSS-Klasse vom Bild (imgID) in "k2"
        break;
      case 2:
        //Ändere CSS-Klasse vom Bild (imgID) in "k1"
        break;
      }
    }

...welche wie folgt im HTML eingebaut sind;

<a href="http://example.org" onMouseOver="ChangeClass('bild1',1)" onMouseOut="ChangeClass('bild1',2)"><img class="k1" id="bild1" src="bild1.jpg" alt=""></a>
<a href="http://example.net" onMouseOver="ChangeClass('bild2',1)" onMouseOut="ChangeClass('bild2',2)"><img class="k1" id="bild2" src="bild2.jpg" alt=""></a>
<a href="http://example.com" onMouseOver="ChangeClass('bild3',1)" onMouseOut="ChangeClass('bild3',2)"><img class="k1" id="bild3" src="bild3.jpg" alt=""></a>

---
Ja, so hat ich mir das ungefähr gedacht. Allerdings kann ich ja nicht
das "class"-Attribut ansprechen, wie (in Bezug auf das JS-Script oben) z.B. in der Art:

obj.class = "k2" ...

...weil ja class ein reserviertes Wort ist. Nun, wie stell ich das nun an? ...Hab ich vielleicht einen flaschen Denkansatz?

Danke schonmal :-)

[Christian Seiler]

Hallo Samy,

...weil ja class ein reserviertes Wort ist. Nun, wie stell ich das nun an? ...Hab ich vielleicht einen flaschen Denkansatz?

Du warscht schon sehr nahe dran, allerdings heißt es className und nicht class:

document.getElementById('bidl1').className = 'k2';

resp.

document.getElementById('bidl1').className = 'k1';

Viele Grüße,
Christian

[Samy]

Du warscht schon sehr nahe dran, allerdings heißt es className und nicht class:

Ui *hihi* ...naja fast *g* ..

Danke dir :-)

[MudGuard]

Hi,

Und hier die Javascript-freie Variante:

a:link img.k1 { border: 1px solid black; }
a:hover img.k1 { border: 2px dashed red; }

<a href="http://example.org"><img class="k1" id="bild1" src="bild1.jpg" alt=""></a>
<a href="http://example.net"><img class="k1" id="bild2" src="bild2.jpg" alt=""></a>
<a href="http://example.com"><img class="k1" id="bild3" src="bild3.jpg" alt=""></a>

(wobei die id-Attribute auch nicht nötig sind, wenn sie nicht noch anderweitig gebraucht werden...)

cu,
Andreas