nicht angemeldet
Hallo,
mir schwebt folgendes vor: Wenn man mit der Maus über eine bestimmte Stelle einer Grafik fährt, wird an einer anderen Stelle der Seite ein Text oder Bild eingeblendet.
Folgendes gelingt mir bislang:
1. Wenn man sich mit der Maus auf der Grafik befindet, werden Text und Bild an gewünschter Stelle eingeblendet.
2. Eine andere Grafik habe ich per image map so eingeteilt, dass gewählte Stellen als Link fungieren.
Meine Frage:
ist es möglich, diese beiden Techniken so zu verbinden, dass der hover Effekt nur an einer durch die map definierten Stelle der Grafik in Kraft tritt? Bislang gelingt es mir nicht, die beiden Dinge zu kombinieren.
Die konkrete Idee ist, dass auf das Berühren der Balken auf in der Grafik je eine andere Textanzeige auslöst (siehe Link).
Im Forum habe ich nur eine Seite zu Ausklappmenus gefunden, die mir leider etwas zu kompliziert war, deshalb versuche ich es mit diesem Posting.
Vielen Dank für die Hilfe
Ich habe die Testseite zur Ansicht hier abgelegt: http://www.rubenfischer.de/xenon/
Hier der Code mit beiden Versuchen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
a, a:visited {}, a:hover {}
#container a.pics span {display:none; border:1; width:58px; background:none; border:1px solid #fff; text-align:center;}
#container a.pics:hover span {display:block; position:absolute; left:200px; top:400px; z-index:10;}
</style>
</head>
<body>
<div id="container">
<a class="pics" href="#nogo"><img src="logo.jpg" alt="" />
<span>
<table border=0 width="500">
<td>
<img src="bild.png " alt="Text Text Text " title="Text Text Text " />
</td>
<td>
Das Ensemble
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</td>
</table>
</span>
</a>
</div>
<img src="logo.jpg" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="rect" coords="1,1,500,100"
href="bild.png">
</map>
</body>
</html>
Gunnar Bittersmann
suit