tray-park: HotSpot-Verweis auf CSS Box

SELF-Forum

HotSpot-Verweis auf CSS Box

tray-park
– Informationen zu den Bewertungsregeln

Hallo!

Ich möchte HotSpots auf einem Bild setzen, welche dann beim überfahren mit der Maus, eine CSS Box mit näheren Informationen öffnet.

Die HotSpots zu setzen ist kein Problem. Das habe ich so gelöst:

  
  
<img src="xxx" width="200" height="200" border="0" alt="Karte" usemap="#usemap1">  
  
<map name="usemap1">  
    <area shape="rect" coords="11,10,59,29"  
          href="about.blank" alt="" title="">  
  
</map>

In diesem Fall ist der HotSpot links oben in der Ecke.

Die CSS Box habe sieht so aus:

  
  
<style type="text/css">  
<!--  
img {  
border:5px;  
border-color:black;  
  
}  
  
#box{  
width:100px;  
height:47px;  
padding:0;  
margin:20px;  
font:bold 14px verdana, sans-serif;}  
  
#box div{display:none;}  
  
#box:hover div{  
background-color:#FFFFFF;  
display:block;  
width:840px;  
position:absolute;top:100px;left:20px;  
border:1px;  
border-color:#808080;  
border-width:thick;  
border-style:double;  
padding:15px;  
font:normal 14px verdana, sans-serif;}  
  
-->  
</style>  
</head>  
<body>  
  
<div id="box"><a href="xxx.xx"><img src="xxx.xx" width="100" height="47" alt="Maske"></a>  
  
<div><p>Guten Tag</p>  
  
<p>Dies ist meine CSS Box!</p>  
  
<p><img src="xxx.xx"></p>  
  
</div>  
</div>  
  
</body>  
  
</html>

Wie kann ich es nun schaffen, dass der Verweis des HotSpots, die Box öffnet?

MfG Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. HotSpot-Verweis auf CSS Box

    tray-park
    – Informationen zu den Bewertungsregeln

    So was wie hier die Top Navigation suche ich

    http://www.thestyleworks.de/

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. HotSpot-Verweis auf CSS Box

      suit Homepage des Autors
      – Informationen zu den Bewertungsregeln

      So was wie hier die Top Navigation suche ich

      http://www.thestyleworks.de/

      dein tooltip muss ein kindelement des menüpunkts sein, etwa so - idealerweise sollte er ein kindelement eines a-elements sein, da die hover-pseudoklasse im internet explorer 6 nur auf a-elemente wirkt

      <ul id="menu">  
  <li><a href="#">Menüpunkt1 <span>tooltip-text</span></a></li>  
  <li><a href="#">Menüpunkt2 <span>tooltip-text</span></a></li>  
</ul>

        
#menu {  
  position: relative;  
}  
  
#menu span {  
  display: none;  
}  
  
#menu a:hover span {  
  display: block;  
  position: absolute;  
  top: 100px;  
  left: 200px;  
}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln