Image Map mit CSS Tool Tip
Stefan
- css
0 Zeromancer0 Stefan
0 wahsaga0 schwarze Piste0 Stefan
0 Thomas J.S.
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
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é
Hi André,
nein der Tooltip reicht nicht aus. Die Info muss gross und deutlich sichtbar sein !
Bye
Stefan
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
Tachchen!
Das Problem hast du ja erkannt, eine Lösung könnte evtl. so aussehen.
Gruß
Die schwarze Piste
Hi schwarze Piste,
die Lösung ist aber sehr kompliziert. Ich glaube, da steig ich nicht durch.
Bye
Stefan
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