Imagemap mit Tooltip
Verfasst: Fr 22. Mai 2020, 09:54
Hier eine Anleitung für ein Imagemap mit Tooltip.
Die benötigten Dateien für den Tooltip kann man sich hier runterladen: http://www.walterzorn.de/tooltip/tooltip.htm
Dieses in den Header:
Url zur Datei anpassen.
Eine geeignete Imagemap erstellen. Dafür eignet sich das Programm Fast Image-Map ganz gut. Nach dem Bearbeiten der Image-Map kopiert man den Code in die Zwischenablage. Von dort aus kopiert man es dann in die Textseite.
in diesem Beispiel wurden die vom Programm eingesetzten Mousover und Mouseout Prozeduren durch die für den Tooltip ersetzt. Auch hier wieder die Url zu den Bildern anpassen.
Hier dazu eine Testseite: http://hapes-javascript-demo-page.hpage ... -test.html
Die benötigten Dateien für den Tooltip kann man sich hier runterladen: http://www.walterzorn.de/tooltip/tooltip.htm
Dieses in den Header:
Code: Alles auswählen
<style type="text/css">
<!--
body {
overflow-x:hidden; }
-->
</style>Eine geeignete Imagemap erstellen. Dafür eignet sich das Programm Fast Image-Map ganz gut. Nach dem Bearbeiten der Image-Map kopiert man den Code in die Zwischenablage. Von dort aus kopiert man es dann in die Textseite.
in diesem Beispiel wurden die vom Programm eingesetzten Mousover und Mouseout Prozeduren durch die für den Tooltip ersetzt. Auch hier wieder die Url zu den Bildern anpassen.
Code: Alles auswählen
<center><img src="cloud.png" width="809" height="809" border="0" alt="" title="" usemap="#Imagemap-Test" ></center>
<map name="Imagemap-Test" id="Imagemap-Test">
<area shape="rect" coords="359,124,496,241" onmouseover="Tip('Image 1<br> <br><img src=\'image1.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
<area shape="rect" coords="569,126,707,242" onmouseover="Tip('Image 2<br> <br><img src=\'image2.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
<area shape="rect" coords="96,350,233,469" onmouseover="Tip('Image 3<br> <br><img src=\'image3.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
<area shape="rect" coords="310,348,447,467" onmouseover="Tip('Image 4<br> <br><img src=\'image4.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
<area shape="rect" coords="33,571,169,692" onmouseover="Tip('Image 5<br> <br><img src=\'image5.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
<area shape="rect" coords="228,574,363,693" onmouseover="Tip('Image 6<br> <br><img src=\'image6.jpg\' width=\'120\'> ')" onmouseout="UnTip()">
</map>