Bild anzeigen beim MouseOver eines Menüpunktes...

[milu]

Hallo,

ich möchte gerne beim Überfahren eines Menüpunktes ein Bild anzeigen lassen. Das Menü ist horzontal ausgerichtet und es sollen nur bei den Hauptmenüpunkten die Bilder angezeigt werden. Ich bin absoluter Anfänger in diesem Bereich und weiss nicht so recht, wie ich es anstellen soll. Kann ich das mit Css realisieren oder muss ich dazu JavaScript einsetzen?

Vielen Dank für eure Hilfe...

mfg.

[Mathias Brodala]

Hallo milu.

ich möchte gerne beim Überfahren eines Menüpunktes ein Bild anzeigen lassen. Das Menü ist horzontal ausgerichtet …

Was heißt das? Alles auf einer Website ist irgendwie horizontal ausgerichtet.

… und es sollen nur bei den Hauptmenüpunkten die Bilder angezeigt werden.

Suchst du vielleicht die Infobox?

Einen schönen Dienstag noch.

Gruß, Mathias

[milu]

hallo mathias,

im prinzip ist es das... nur bekomme ich einfach nicht hin, daß der text oberhalb erscheint.

mfg.

[Mathias Brodala]

Hallo milu.

im prinzip ist es das... nur bekomme ich einfach nicht hin, daß der text oberhalb erscheint.

Wie sieht dein Versuch aus?

Einen schönen Dienstag noch.

Gruß, Mathias

[milu]

hallo mathias,

der bildwechsel funktioniert, aber die positionierung bekomme ich einfach nicht hin.

gruss milu

<div id="container">
  <ul id="menue">
    <li>
     <a href="#">Bild-1<img src="bild1.gif"></a>
    </li>
    <li>
     <a href="#">Bild-2<img src="bild2.gif"></a>
    </li>
    <li>
     <a href="#">Bild-3<img src="bild3.gif"></a>
    </li>
    <li>
     <a href="#">Bild-4<img src="bild4.gif"></a>
    </li>
  </ul>
</div>

div#container a img
{
 height: 0;
 width: 0;
 border-width: 0;
}

div#container a:hover img
{
 position: absolute;
 top: 0px;
 left: 55px;
 height: 80px;
 width: 120px;
}

ul#menue
{
 margin-left: 0;
 padding-left: 0;
 white-space: nowrap;
}

#menue li
{
 display: inline;
 list-style-type: none;
}

#menue a
{
 padding: 3px 10px;
}

#menue a:link, #menue a:visited
{
 color: #fff;
 background-color: #036;
 text-decoration: none;
}

#menue a:hover
{
 color: #fff;
 background-color: #369;
 text-decoration: none;
}

[Mathias Brodala]

Hallo milu.

der bildwechsel funktioniert, aber die positionierung bekomme ich einfach nicht hin.

[…]

Wenn die jeweilige Grafik über dem Menü angezeigt werden soll, musst du dafür natürlich Platz schaffen. Das hat auch den Vorteil, dass später nichts durch die Gegend springt.

Platziere also ul#menue am besten relativ und von 80px (die Höhe der Grafiken) von oben.

div#container a:hover img

{
position: absolute;
top: 0px; /* Hier muss die Position von oben dann natürlich -80px betragen. */
left: 55px;
height: 80px;
width: 120px;
}

  
  
Einen schönen Dienstag noch.  
  
Gruß, Mathias  

-- 
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)  
  
debian/rules

[milu]

hallo mathias,

ich bin es nochmal... die grafik wird nun über dem menü angezeigt. jedoch passiert das immer an der selben stelle. wie bekomme ich es hin, daß die bilder über dem jeweiligen menüpunkt angezeigt werden. brauche ich dazu doch javascript?

gruss milu

[Mathias Brodala]

Hallo milu.

ich bin es nochmal... die grafik wird nun über dem menü angezeigt. jedoch passiert das immer an der selben stelle. wie bekomme ich es hin, daß die bilder über dem jeweiligen menüpunkt angezeigt werden. brauche ich dazu doch javascript?

Nein, keineswegs. In diesem Falle verlagerst du die relative Positionierung inkl. dem Wert für top von 80px aus ul#menue nach ul#menue a.

Nun kannst du den Wert für left bei div#container a:hover img auf 0 setzen. Hiermit orientiert sich die absolute Positionierung der img-Elemente nun direkt an dem a-Element, in dem sie enthalten sind.

Einen schönen Freitag noch.

Gruß, Mathias