Mouse over Text

DaRocco · 01.01.2011

Bin grad dabei ne kleine Page zu basteln, dabei möchte ich auf ein Miniaturmenü zurückgreifen.

Dieses soll nur aus kleinen quadratischen Fläschen bestehen, sonst nix.
So ist natürlich ein Navigieren unmöglich.

Daher möchte ich beim Überfahren der Schaltfläche den Name des Menüpunktes über dem Menü anzeigen lassen.

Wie geht das?

Kenne Mouseover bis jetzt nur so, dass Bilder überfahren werden und dann ein anderes Bild angezeigt wird.

Danke euch!

msblacky · 01.01.2011

AW: Mouse over Text

Hallo,

bei Mouseover sind es ja 2 Bilder eins im normal und das andere wenn die Maus drüber ist, also ich nenns mal so, bei normal ist die Schrift weis und wenn die Maus drüber ist z.B. rot. Also kannst Du doch bei normal deine Fläche machen und wenn die Maus drüber geht den Namen (müßte eben nur ein Bild sein mit Schrift).

msblacky

DaRocco · 01.01.2011

AW: Mouse over Text

Hier mal ne preview:

Und genau über den Kästchen soll dann einheitlich der Linktext beim überfahren stehen.
Mittels Grafikmouseover scheint mir suboptimal.

Das geht bestimmt trafficschonender und einfacher.

sokie · 01.01.2011

AW: Mouse over Text

wenn du es ganz einfach und bedienerfreundlich haben willst, gibst du jeden der <a> elemente ein title="Anzeigetext"; dann wird das beim Überfahren angezeigt.
Denkbar wäre auch eine Javascriptlösung - sollte man sich aber nicht drauf verlassen: Menüs müssen schliesslich auch funktionieren, wenn der Besucher Javascript deaktiviert hat. Also allenfalls ergänzend.

cebito · 01.01.2011

AW: Mouse over Text

Versuchs mal per css->first-child...

HTML:

<!doctype html>
<html>
<head>
    <title>Hoverbild</title>
<style type="text/css">
ul {display:block;}
ul li {width:50px; height:50px; position:relative; float:left;}
ul li>img:first-child{position:absolute; top:-25px; left:0; display:none;}
ul li:hover>img:first-child{display:block;}
</style>
</head>
<body>
<ul>
<li><img src="beschreibung01.jpg" /><a href="#"><img src="01.jpg" /></a></li>
<li><img src="beschreibung02.jpg" /><a href="#"><img src="02.jpg" /></a></li>
<li><img src="beschreibung03.jpg" /><a href="#"><img src="03.jpg" /></a></li>
</ul>
</body>
</html>

CanTk · 01.01.2011

AW: Mouse over Text

Selbes Prinzip wie bei einem Droppdownmenü. Kannst dir eigentlich eins klauen.
Ist fast nur CSS.

einfach mit den :hover arbeiten und absolute bzw relative positionierung.
Gruß Can

standby83 · 02.01.2011

AW: Mouse over Text

Hallo,

okay.. ist vielleicht ein bisschen OT, aber ich würde aus Usability-Gründen auf so eine Navigation verzichten. Es ist unzumutbar für den Nutzer erst in Aktion treten zu müssen, um dann erst herauszufinden, was sich hinter "Tor 1" - "Tor 7" befindet. Die Farbgestaltung bringt ja auch keinen Aufschluss.

Meine Empfehlung. Verzichte auf die quadratische Form. Schreibe die Linknamen in die Boxen statt Ziffern und wenn du immer noch nen Mouseover-Effekt haben willst, dann platziere dort weiterführende Informationen, die dem Nutzer Aufschluss darüber geben, dass sich beispielsweise unter dem Link "Kontakt" auch die Anfahrtsbeschreibung... befindet. ;-)

Hier ist eine Variante, die auch ohne JavaScript funktioniert: webbe.de - CSS-Tooltip
Der Vorteil gegenüber den Tooltipps ist, dass die Info ohne Verzögerung dem Nutzer angezeigt wird und dieser auch nicht zwanghaft die Maus drüber still halten muss.
Allerdings musst du dort fix positionieren. ;-)

Viele Grüße
Sabrina