Mouseover Grafik einbinden?

[haberkorn]

Hallo alle zusammen,

ich suche schon länger nach einer Lösung, wie ich beim Mouseover einer Navi eine Grafik einbinden kann.
Dabei handelt es sich um eine png-Datei einer Hand, die neben der Navi erscheinen soll und auf den Menüpunkt zeigt,
über welchen gerade "drübergefahren" wird.
Nun weiß ich nciht wie ich das einbinden kann. Bei hover gibt es nur "background-image", was ja nichts bringt und mit "cursor url ()" lässt sich diese grafik auch nicht darstellen.

Weiß jemand wie ich das umsetzen kann?


Vielen Dank schonmal und liebe Grüße!

 

[bidu2004]

Hallo haberkorn,

da du erst seit 2 Tagen hier auf dem Forum bist begrüsse ich dich ganz herzlich
Nun zu deiner Frage: wie meinst du das genau? Soll das PNG den Cursor ersetzen oder neben jenem erscheinen?

 

[haberkorn]

Danke :)

Die Datei der Hand soll neben der Navi erscheinen und auf den Menüpunkt zeigen.
Die Cursor-Sachen waren Notlösungen

 

[threadi]

Das ist über background-image lösbar. Schau dir mal das Menü hier im Forum oben an. Wenn Du dort mit der Maus drüber gehst, ändert sich die Hintergrundfarbe (per hover-Pseudoklasse). Genau so kannst Du auch ein Hintergrundbild bei Mausberührung an irgendeiner Stelle des Links erscheinen lassen.

Einfaches Beispiel:

<ul id="navigation">
 <li><a href="link.html">Menüpunkt</a>/li>
 <li><a href="link.html">Menüpunkt</a>/li>
</ul>

#navigation li a {
 background-repeat: no-repeat;
 background-position: center left;
 display: block;
 padding: 0 0 0 24px;
}
#navigation li a:hover {
 background-image: url(bild.png);
}

Hier erscheint bild.png links vom Menüpunkt sobald man mit der Maus drüber geht.

Moderation: Verschoben von HTML zu CSS da es um Gestaltung geht.

 

[haberkorn]

Danke für die Hilfe.

Leider war ich sowei schon einmal. Doch ich bekomme die Grafik nicht richtig positioniert. Die hängt jetzt immernoch ein bisschen hinter dem Menüpunkt..

 

[Tronjer]

Ein höherer z-index würde es wahrscheinlich vor den Menüpunkt bringen und ansonsten bleiben immer noch margin, padding, top und left zum Verschieben.

 

[threadi]

Mit z-index hat das gar nichts zu tun. Man muss das Hintergrundbild mit background-position ausrichten. Wenn Du schon soweit warst, zeig doch mal deinen Quellcode?!

 

[haberkorn]

#navi {
width:200px;
float: left;
margin-top: 500px;
padding-top: 30px;
padding-left: 120px;
text-decoration: none;
}

#navi li ul {
display: none;
padding-left: 10px;
}

#navi, #navi ul {
list-style: none;
}

#navi li a {
background-repeat: no-repeat;
background-position:left;
display: block;
}

#navi li a:hover {
background-image: url(images/finger.png);
}


Die Navi besteht aus Grafiken. Der Finger bleibt auch nach Positionierungen mit margin ect. an seinem Ursprungsplatz und wird immer beim Ende der längsten Grafik abgeschnitten..

 

[threadi]

Du hast also eine Navigation mit Bildern wo Du dann noch eine Finger-Grafik anzeigen willst. Gut zu wissen, da sind wir schonmal einen Schritt weiter.

Die Finger-Grafik kann man (wie schon mehrfach gesagt) per background-position ausrichten, was Du ja auch tust. Mit margin "etc." kommst Du da nicht weiter.

Wenn ich das so sehe müsstest Du eigentlich eher folgendes schreiben:

<ul id="navi">
 <li><a href="link1.html" class="link1"><span>Beschriftung</span></a></li>
 <li><a href="link2.html" class="link1"><span>Beschriftung 2</span></a></li>
 <li><a href="link3.html" class="link1"><span>Beschriftung 3</span></a></li>
</ul>

#navi {
width:200px;
float: left;
margin-top: 500px;
padding-top: 30px;
padding-left: 120px;
text-decoration: none;
}
 
#navi li ul {
display: none;
padding-left: 10px;
}
 
#navi, #navi ul {
list-style: none;
}
 
#navi li a {
 background-repeat: no-repeat;
 background-position: 0 24px;
 display: block;
}

/* Hier jetzt die Fingergrafik dem span zuordnen, welches in einer Ebene oberhalb des Links liegt */
 #navi li a span {
 background-repeat: no-repeat;
 background-position: 0 0;
}

#navi li a:hover span { background-image: url(images/finger.png); }

/* Hier die Grafiken der Navigation einfügen, die liegen dann in einer Ebene unter dem span */
#navi li.link1 {
 background-image: url(images/grafik1.png);
}
...

Bei dem Code wird die Grafik der Menüpunkte 24px nach rechts geschoben. Bei den 24px wird dann bei Mouseover die Finger-Grafik angezeigt. Du müsstest es "nur" noch so gestalten, dass auch diese 24px ggfs. mit Farbe (nicht Bildern!) gefüllt werden damit der Style der Navigation einheitlich aussieht.