Imagemap mit Hovertext

[krawutke]

Hi,

ich suche eine Möglichkeit eine Grafik mit Erklärungstext zu hinterlegen. Sprich ich habe 10 Bereiche, bei denen ich per Mouseover oder auch Klick dann Infotext angezeigt bekomme.
Wie mache ich denn so was am schönsten?

Gruß

 

[Trüffelkrieger]

Du musst einfach dem Link ein title Attribut geben.

<a href="link.html" title="Beschreibung des Links">image</a>

Dieser Text wird dann bei kurzem Verweilen auf dem Link angezeigt, also nicht ganz beim Hovern.
Vielleicht hilft dir zum hovern dieser Link hier: webbe.de - CSS-Tooltip

 

[krawutke]

Na den Title Tag kenne ich schon. Dein Link sieht gut aus. Gehen da auch Grafiken?

 

[mermshaus]

Willkommen im Forum.

Wie mache ich denn so was am schönsten?

Das ist nicht so wirklich sinnvoll zu beantworten, oder?

Suchbegriff wäre etwa „css“ oder „javascript“ oder „jquery“ und „tooltip“.

 

[krawutke]

Na meine Frage bezog sich eher auf das "schönsten" ;) Sprich ich habe eine schicke Lösung gesucht.
Jetzt habe ich was nettes gefunden:
Sexy Tooltips with Just CSS

 

[krawutke]

Der Nachteil ist allerdings, dass das ganze nur mit Links, aber nicht mit Imagemaps funktioniert. Hat da einer von Euch noch ne Idee?

 

[Wustersoss]

Hallo Krawutke,

du suchst sowas wie in diesem Beispiel hier:
Stu Nicholls | CSS Image Map #10

Wenn dein Englisch gut genug ist kannst du hier Stu Nicholls | CSSplay | A CSS image map tutorial die Vorgehensweise nachlesen. Wenn nicht, kopiere einfach den Quellcode und passe ihn deinen Bedürfnissen an.

 

[krawutke]

Ah danke ;) Das ist cool.

 

[mermshaus]

Ich habe gerade ein wenig gesucht, konnte aber keine Hinweise darauf finden, dass Image-Maps hinsichtlich dem Hinzufügen von Tooltips anders funktionieren als andere HTML-Elemente. Tooltip-Scripts selbst gibt es viele. Da müsstest du einfach mal gucken.