Bild per hover ändern

[Sweety21]

Hallo,
ich bin blutige Anfängerin und möchte gerne meine eigene Webseite programmieren.

Nun habe ich aber folgendes Problem.
Ich habe ein Menü:

| Home | New| usw.

Dabei sind | Trennzeichen und sie sind Bilder. Nun möchte ich wenn mit der Maus über Home gefahren wird das sich das Trennzeichen rechts und links ändern.

Geht das überhaupt? Und wenn ja wie?


Vielen Danke jetzt schon mal.
Falls das Thema hier falsch ist bitte verschieben.
Liebe Grüße

[wolf29]

Moin.

Schau mal hier:

stu nicholls dot com | javascript and CSS home page
Stu Nicholls | CSSplay | CSS only menus

imho beste Beispielseite für CSS Menüs (rund um CSS). Da findest Du ne Menge Beispiele zu deinem Thema.

Wolf29

P.S. http://www.lmgtfy.com/?q=css+hover+bild

[Arne Drews]

Hi,

Ich hab die Links von Wolf29 jetzt nicht durchgesehen, falls dort ähnliches gemacht wird.
Ich mache es immer so, wenn ich Buttons/Navigationspunkte als Bild nutze, daß ich die Bilder in doppelter Höhe erstelle
und per background-Eigenschaft im CSS die Position anpasse.

Als Beispiel bei einem Button von 50x20 Pixel erstelle ich eine Grafik von 50x40 und lege in den oberen 20 Pixel den Standardbutton ab und in den unteren den Hover-Button.
Den A-Tag definiere ich dann im CSS folgendermassen:

A.meinbtn {
  width:50px; height:20px;
  background:url(./pfad/zum/button.jpg) top;
  float:left;
  display:block;
}

A.meinbtn:hover { background-position:bottom; }

Um ein wenig auf Braille zu achten setze ich noch ein

A I { display:none; }

in das CSS und kann dann den Anchor mit

<a class="meinbtn" href="#" target="_self"><i>Home</i></a>

den Button setzen.
Das hat den Vorteil, daß bei deaktiviertem CSS die Navigation trotzdem ohne Einschränkung nutzbar ist.

Wie gesagt: Mag sein, daß die Links von wolf29 das ähnlich machen.

[wolf29]

@Arne Drews: Ja, machen Sie, aber man muss etwas suchen! Du hast ja praktisch schon die Lösung geliefert!

Wolf29

[Arne Drews]

Na dann, sorry.
Aber sie muß es ja noch verstehen, um es auf Ihre Button anwenden zu können.
1:1 kopieren wird nicht funzen...

[Sweety21]

Das versteh ich nicht so ganz.
Ich änder damit doch immer nur den gleichen Button oder?
Ich möchte gerne ein einfaches Bild nur ändern.

Also zb aus :
|Home|News|

*Home*News|

machen wenn ich über Home gehe.

[wolf29]

...meine Links hattest Du nicht angeschaut, oder? Dann schau nochmal hier:

WebDesign - Tips und Tricks: Bildwechsel clever mit CSS

Wolf29

P.S. Außerdem finde ich es auch recht gut erklärt von Arne Drews. Was ist daran unklar?