funktioniert ganz einfach mit stylesheet i Deiner style.css
Du findest dort folgenden Eintrag
.button1 {
background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif') no-repeat top center;
margin: 0;
padding: 0;
height: 37px;
width: 67px;
float: left;
}
.button2 {
background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif') no-repeat top center;
margin: 0;
padding: 0;
height: 37px;
width: 67px;
float: left;
}
Alles anzeigen
und den änderst Du wie folgt. (Tip: Schau einmal auf Css4You die css Selektoren I & II durch)
.button1 a, .button2 a {
background: no-repeat top center;
margin: 0;
padding: 0;
height: 37px;
width: 67px;
float: left;
}
.button1 a, .button2 a {
background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif');
}
.button1 a:active, .button2 a:active {
background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtestXY.gif');
}
Alles anzeigen
Die letzte css-Definition kannst Du mit :hover (Mouse over) und :focus (Mouseklick) versehen. Bei focus würde ich noch outline:none; hinzufügen um die gepunktete Aussenlinie vom FF weg zu bekommen.
Und diesen "Tip" wiederhole ich nochmals: Lies Dir bitte die CSS-Selektoren auf Css4You durch. Das erspart hier unnötige Antworten und hilft Dir ungemein a) Zeit zu sparen b) zu verstehen was Du tust. Und c) ist es eigentlich ganz einfach, wenn man sich die 10-20min. einmal Zeit nimmt. :-D
Ein weiterer "Tip": Firefox und AddOn: Webdeveloper-Toolbar. Da kannst Du Dir mit [Strg]+[E] alle Stylesheets anschauen und direkt ändern. Die Änderungen bleiben nur solange bestehen, wie Du die Seite angewählt hast. Ist sehr angenehm zum Ausprobieren und Lernen. Ich schreib meine Dinge dort alle rein, kopier sie dann ins Originalfile und lad das hoch. Dann neu laden und anschauen und weiter verändern.
Gutest Gelingen!