Stefan: Image Map mit CSS Tool Tip

SELF-Forum

Image Map mit CSS Tool Tip

Stefan
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte bei einem ImageMap einen CSS Tooltip einfügen. Ich habe folgenden Code:

<style type="text/css">
#tooltip a {margin:0 10px; position:relative; text-decoration:none;}
#tooltip a:hove {position:relative; z-index:1;}
#tooltip a span {display: none;}
#tooltip a:hover span {display: block; position: absolute; z-index:1;
           top: 0px; left: 130px; width: 175px; background: yellow; color: black;
           padding: 10px 7px; font-size: 0.8em;  border:1px solid black;}
</style>

In einem normalen Link geht alles bestens:

<p id="tooltip"><a href="#">Test<span>Infotest</span></a></p>

Aber wie baue ich das bei einem ImageMap ein? Da gibt es ja nicht <a></a>

<map name="imgMap">
<area shape="rect" coords="249,318,345,333" href="#" alt="">
</map>

<img src="img.gif" width="600" height="450" alt="" usemap="#imgMap">

Danke im voraus..

Stefan

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Image Map mit CSS Tool Tip

    Zeromancer
    – Informationen zu den Bewertungsregeln

    Hallo Stefan,

    #tooltip a:hove {position:relative; z-index:1;}

    da würde ein "r" fehlen

    In einem normalen Link geht alles bestens:
    <p id="tooltip"><a href="#">Test<span>Infotest</span></a></p>
    Aber wie baue ich das bei einem ImageMap ein? Da gibt es ja nicht <a></a>

    Dir reicht nicht das "title"-Attribut?
    (http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm):

    Um beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Fenster ("Tooltip"-Fenster) anzuzeigen, können Sie in den <area>-Tags jeweils das  Universalattribut title="Mein angezeigter Text" verwenden. Dies wird allerdings nicht von allen Browsern interpretiert.

    Mit freundlichen Grüßen,
    André

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Image Map mit CSS Tool Tip

      Stefan
      – Informationen zu den Bewertungsregeln

      Hi André,

      nein der Tooltip reicht nicht aus. Die Info muss gross und deutlich sichtbar sein !

      Bye

      Stefan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Image Map mit CSS Tool Tip

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    In einem normalen Link geht alles bestens:

    <p id="tooltip"><a href="#">Test<span>Infotest</span></a></p>

    Eben, weil du da den zusätzlichen Inhalt als Kindelement des Links unterbringen kannst.

    Aber wie baue ich das bei einem ImageMap ein?

    Das geht mit dieser Methode so m.E. gar nicht - weil <area> keine Kindelemente haben kann.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Image Map mit CSS Tool Tip

    schwarze Piste
    – Informationen zu den Bewertungsregeln

    Tachchen!

    Das Problem hast du ja erkannt, eine Lösung könnte evtl. so aussehen.

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    Smartbytes Webdesign in Oberhausen
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Image Map mit CSS Tool Tip

      Stefan
      – Informationen zu den Bewertungsregeln

      Hi schwarze Piste,

      die Lösung ist aber sehr kompliziert. Ich glaube, da steig ich nicht durch.

      Bye

      Stefan

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. Image Map mit CSS Tool Tip

    Thomas J.S.
    – Informationen zu den Bewertungsregeln

    Hallo,

    Aber wie baue ich das bei einem ImageMap ein? Da gibt es ja nicht <a></a>

    <area onmouseover="showTooltip('tooltip1')" onmouseout="hideTooltip('tooltip1')"

    <div id="tooltip1" class="tooltip">bla bla></div>
    ... für alle anderen Tooltips.

    function showTooltip(strID)
     {
     if(document.getElementById)
      {
      document.getElementById(strID).style.visibility ="visible";
      document.getElementById(strID).style.zIndex ="10";
      }
     }

    function hideTooltip(strID)
     {
     if(document.getElementById)
      {
      document.getElementById(strID).style.visibility ="hidden";
      document.getElementById(strID).style.zIndex ="0";
      }
     }

    funktionen eventuell anpassen.

    Grüße
    Thomas

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln