CSS: Links mit Bilderwechsel - Anfänger braucht Hilfe

Hallo,
ich bastle gerade an meiner 1. Hompage!
Diese besteht aus 1 Startseite + 3 weiteren Seiten.
Alles funktioniert so weit bestens.
Nun arbeite ich noch an der Optik.
Ich möchte dass sich meine Navigationsbuttons (sind kleine Bilder) verändern. a:link a:activ: a:hover etc..
Hierfür möchte ich mit CSS arbeiten – wovon ich leider noch nicht viel Ahnung habe.
Ich weiß einfach nicht:
- wie der Code genau aussehen muß
- und ob ich diesen Code oben in den Head schreiben kann
- oder ob ich ein externes Stylsheet anlegen muß
- und wie ich die jeweiligen Verlinkungen einbauen muß

Hier mal meine Bezeichungen:
1. Button / verlinkt zu index.html
Bildbezeichnungen: (link) start.jpg (hover) start1.jpg (active) start2.jpg

2. Button / verlinkt zu afrika.html
Bildbezeichnung: (link) twin.jpg (hover) twin1.jpg (active) twin2.jpg

3. Button / verlinkt zu rc.html
Bildbezeichungen: (link)rc.jpg (hover)rc1.jpg (active)rc2.jpg

4. Button / verlinkt zu yz.html
Bildbezeichunge: (link) yz.jpg (hover)yz1.jpg (active)yz2.jpg

Ich würde mich sehr freuen, wenn mir jemand helfen könnten!

Gruß Geli

Hallo Jörg, danke für den Link.
Seit 3 Tage lese ich bereits alle Anleitungen, die ich zu meinem Problem finden kann. Auf den Link zum selfthtml hatte ich schon gefunden. Dennoch schaffe ich es nicht, den Code so umzugestalten, dass es mit meinen 4 Button funktioniert.
...mh..

Hallo Jörg,
vielen Dank!
Jetzt bin ich ein Stück weiter.
Nun habe ich ein externes Stylesheet angelegt und dieses probeweise mit der Startseite verlinkt:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Es passiert schon was.... nur an der falschen Stelle und in der falschen Größe.
Die Bildbuttons sind nur ca.2px schmal

habe die Größe aber hier angegeben

ul#menu a {
display:block;
width:140px;
height:40px
}

und vor jedem Bild erscheint ein Aufzählzeichen (ein Punkt).


Wo genau muß ich denn das ID-Menü plazieren?
Meine Bilderbuttons befinden sich in einer Tabelle.
Gleich oben, wo die Tabelle anfängt oder genau in der Zelle <td ..> wo die Buttons liegen?

Muß ich die bisherigen Verlinkungen entfernen und durch das ID-Menü ersetzten? Im Moment erscheinen die bisherigen Bilderbuttons + die neuen aus dem Stylesheet.


Über einen weiteren Tipp würde ich mich freuen!

Gruß Geli

Hallo Jörg,
ich habe es leider noch immer nicht geschafft.

Hier mal mein stylesheet und unten der code:

<style type="text/css">
ul#menu a {
display:block;
width:150px;
height:40px
}
li#link1 a {
background-image:url (./start.jpg);
}
li#link1 a:hover {
background-image:url (./start1.jpg);
}
li#link1 a:active {
background-image:url (./start2.jpg);
}
li#link2 a {
background-image:url (./africa.jpg);
}
li#link2 a:hover {
background-image:url (./africa1.jpg);
}
li#link2 a:active {
background-image:url (./africa2.jpg);
}
li#link3 a {
background-image:url (./rc45.jpg);
}
li#link3 a:hover {
background-image:url (./rc451.jpg);
}
li#link3 a:active {
background-image:url (./rc452.jpg);
}
li#link4 a {
background-image:url (./yz125.jpg);
}
li#link4 a:hover {
background-image:url (./yz1251.jpg);
}
li#link4 a:active {
background-image:url (./yz1252.jpg);
}
</style>

So sah die Tabelle bisher aus.
Die Bildbuttons sind 140x40px groß.

<td width=20%>
<br>
<p align="center"><a href="index.html"><img src="./start.jpg" border="0"></a></p><br>
<p align="center"><a href="africa.html"><img src="./africa.jpg" border="0"></a></p><br>
<p align="center"><a href="rc.html"><img src="./rc45.jpg" border="0"></a></p><br>
<p align="center"><a href="yz.html"><img src="./yz125.jpg" border="0"></a></p><br>
</td>

Und so habe ich nun das Id-Menu am selben Platz angelegt.
(Den ursprünglichen Code habe ich entfernt.)
Hier erscheinen nur noch 2px breite Bildbuttons und wie gesagt die
Aufzählzeichen.
Wenn ich
ul#menu {
list-style-type:none;
}
verwende, erscheint leider garnichts mehr.

<tr>
<td width=20%>
<br>
<ul id="menu">
<li id="link1"><a href="index.html">&nbsp;</a></li><br>
<li id="link2"><a href="africa.html">&nbsp;</a></li><br>
<li id="link3"><a href="rc.html">&nbsp;</a></li><br>
<li id="link4"><a href="yz.html">&nbsp;</a></li><br>
</ul>
</td>

Hoffentlich kannst Du den Fehler finden!

Gruß Geli

habe ich jetzt gemacht - hat sich aber nichts verändert :-(