Hallo!
Ich möchte, dass beim mouseover ein Text im/über dem Bild erscheint. Das habe ich soweit schon umgesetzt bekommen. Nur möchte ich das ganze jetzt bei einem größeren Bild auf Hotspots aufteilen.
Hier schonmal eine funktionierende Version ohne Hotspot:
Und hier eine Version mit Hotspot, bei dem der Mouseover-Effekt nur auf das ganze Bild übertragen wird und noch nicht auf den Hotspot:
Würde mich echt freuen, wenn das einer hinkriegen würde, dass der Text nur über dem Hotspot auftaucht.
Schon mal danke für eure Mühe!
Ich möchte, dass beim mouseover ein Text im/über dem Bild erscheint. Das habe ich soweit schon umgesetzt bekommen. Nur möchte ich das ganze jetzt bei einem größeren Bild auf Hotspots aufteilen.
Hier schonmal eine funktionierende Version ohne Hotspot:
HTML:
<html>
<head>
<style type="text/css">
p.link a:hover {background-color: #2B2E21;;color:#EEEEEE;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover span {
position: absolute;
margin:5px 0px 0px 10px;
background-color: #EEEEEE;
max-width:220;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px/12px verdana;
color: #000000;
text-align:left;
display: block;}
</style>
</head>
<body>
<p class="link"><a href="#"><img src="image.jpg"><span>Text erscheint bei mouseover</span></a></p>
</body>
</html>Und hier eine Version mit Hotspot, bei dem der Mouseover-Effekt nur auf das ganze Bild übertragen wird und noch nicht auf den Hotspot:
HTML:
<html>
<head>
<style type="text/css">
p.link a:hover {background-color: #2B2E21;;color:#EEEEEE;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover span {
position: absolute;
margin:5px 0px 0px 10px;
background-color: #EEEEEE;
max-width:220;
padding: 2px 10px 2px 10px;
border: 1px solid #C0C0C0;
font: normal 10px/12px verdana;
color: #000000;
text-align:left;
display: block;}
</style>
</head>
<body>
<p class="link"><a href="#"><img src="image.jpg" width="96" height="96" usemap="#ImageMap1"><span>Text erscheint bei mouseover</span></a></p>
<map name="ImageMap1">
<area shape="circle" coords="37, 60, 18" href="#">
</map></body>
</html>Würde mich echt freuen, wenn das einer hinkriegen würde, dass der Text nur über dem Hotspot auftaucht.
Schon mal danke für eure Mühe!
