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:
Code:
<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:
Code:
<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