mouseover Bild, das von schwarzweiß nach Farbe wechseln soll

[fabb]

Ich möchte gern, dass meine Bilder, die ich in Icon-Größe auf der Indexseite stehen habe, und die als Links zu meinen Unterseiten fungieren, jedesmal, wenn ich mit der Maus über sie fahre, von Schwarzweiß nach Farbe wechseln.
Meine bisherigen Versuche scheiterten vor allem daran, dass mir nicht klar ist, wie ich die Teilnehmer einer Klasse in CSS einzeln ansprechen kann.

Html

<div id="icons">
<a class="icons" href="seite1.html"><img  src="img/icon1.jpg" alt="icon" title="Bild1"></a>
<a class="icons" href="seite2.html"><img src="img/icon2.jpg" alt="icon" title="Bild2"></a>
</div>

CSS

#icons {
 position: relative;
 top: 130px;
 left: 5px;
}
.icons {
 width:75px;
 height:75px;
 border:0;
 margin:0px;
}

Grüße

frank

[Gunnar Bittersmann]

@@fabb:

nuqneH

Html

<div id="icons">
<a class="icons" href="seite1.html"><img  src="img/icon1.jpg" alt="icon" title="Bild1"></a>
<a class="icons" href="seite2.html"><img src="img/icon2.jpg" alt="icon" title="Bild2"></a>
</div>

Ein Menü ist eine Liste ist eine Liste:

<ul id="menu">  
  <li><a href="seite1.html">Seite 1</a></li>  
  <li><a href="seite2.html">Seite 2</a></li>  
</ul>

Beschäftige dich mit Image-Replacement-Techniken [Meiert] und CSS-Sprites [ALA, Webkrauts].

Per Pseudoklasse ':hover' änderst du den Wert der 'background-position'-Eigenschaft.

Qapla'

[anyone]

Hi,

Per Pseudoklasse ':hover' änderst du den Wert der 'background-position'-Eigenschaft.

Richtig. Oder wenns doch js sein soll gibt jedem Link eine id="link1"

LG

[Steel]

Hi!

Wenn deine Icons als Link fungieren sollen, sind sie ja auch kein Content. Dann kannst Du sie als Backgroundimage benutzen. Damit hast Du schonmal alle Vorraussetzungen um sie auch mit CSS zu veraendern.

Um einzelne Elemente zu veraendern sollten sie auch eindeutig identifizierbar sein. Sinn macht also eine Klasse fuer jeden Link.

<div id="icons">
<a class="icon1" href="seite1.html">Text fuer Leute ohne Grafik</a>
<a class="icon2" href="seite2.html">Text fuer Leute ohne Grafik</a>
</div>

#icons {
 position: relative;
 top: 130px;
 left: 5px;
}
#icons a {
 width:75px;
 height:75px;
 border:0;
 margin:0px;
}

.icon1 {
 background-image:url(Pfad/icon1.jpg);
}

.icon2 {
 background-image:url(Pfad/icon2.jpg);
}

Falls Du das so nciht willst, darfst Du fuer den Hovereffekt gern JS benutzen. Da stoerts nicht, wenns nicht funktioniert.