4
Text bei Mouseover in bestimmten Bereichen anzeigen?
Hallo zusammen,
ich habe folgendes Problem. Ich suche nach einer Möglichkeit einen Musterbescheid einzuscannen und diesem Erklärungen hinzuzufügen.
Also definierte Bereiche bei Mouseover auf einem Bild.
Also wenn jemand mit der Maus über einen bestimmten markierten Bereich fährt soll sich ein "Popup" öffnen das die Erklärung zu diesem Teil anzeigt.
Wie stelle ich so etwas am geschicktesten an?
Hoffe das dies so verständlich ist.
Danke!
ich habe folgendes Problem. Ich suche nach einer Möglichkeit einen Musterbescheid einzuscannen und diesem Erklärungen hinzuzufügen.
Also definierte Bereiche bei Mouseover auf einem Bild.
Also wenn jemand mit der Maus über einen bestimmten markierten Bereich fährt soll sich ein "Popup" öffnen das die Erklärung zu diesem Teil anzeigt.
Wie stelle ich so etwas am geschicktesten an?
Hoffe das dies so verständlich ist.
Danke!
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 226938
Url: https://administrator.de/contentid/226938
Printed on: April 18, 2024 at 16:04 o'clock
4 Comments
Latest comment
Hallo Alternativende,
das gewünschte könntest du bspw. mit einer ImageMap (Online-ImageMap-Generator) realisieren, mit jQueryUI und einem Tooltip.
Du könntest es auch mit Adobe Acrobat und einem PDF machen da gibt es mehrere Varianten (siehe Demo-PDF), das unterstützt "Hotspots" mit Vielzahl an Aktionen. Dann gäbe es noch die Variante es mit Adobe Flash zu realisieren.
Grüße Uwe
das gewünschte könntest du bspw. mit einer ImageMap (Online-ImageMap-Generator) realisieren, mit jQueryUI und einem Tooltip.
Du könntest es auch mit Adobe Acrobat und einem PDF machen da gibt es mehrere Varianten (siehe Demo-PDF), das unterstützt "Hotspots" mit Vielzahl an Aktionen. Dann gäbe es noch die Variante es mit Adobe Flash zu realisieren.
Grüße Uwe
Einen wunderschönen zusammen 
Alternativ geht es auch __ohne Javascript__:
Alternativ zu meinen beiden Text-Fragezeichen kann man auch ein kleines Bildchen einbinden, entweder direkt per img oder über die CSS-Klasse:"tipp" als background-image dann muss man das nicht mehr bei jedem Tipp mit angeben.
~Arano
Alternativ geht es auch __ohne Javascript__:
<html>
<head>
<title></title>
<style type="text/css">
<!--
#img-wrapper { border:2px solid #ff0000; position:absolute; }
.tipp { border:1px solid #00ff00; position:absolute; cursor:help; }
.tipp > span { display:none; border:1px solid #000000; background-color:#ecffc0; position:absolute; top:0px; left:15px; white-space:nowrap; }
.tipp:hover > span { display:inline; }
-->
</style>
</head>
<body>
<p>
Absatz<br>
Absatz
<!-- - ->
<br>
Absatz<br>
Absatz
<!-- -->
</p>
<div id="img-wrapper">
<img src="none" width="800" height="600">
<div class="tipp" style="top:10px; left:50px;">
?? <span>Hilfetext</span>
</div>
<div class="tipp" style="top:100px; left:50px;">
?? <span>Hilfetext Hilfetext Hilfetext<br>Hilfetext Hilfetext</span>
</div>
<div class="tipp" style="top:150px; left:50px;">
?? <span>Hilfetext</span>
</div>
</div>
</body>
</html>Alternativ zu meinen beiden Text-Fragezeichen kann man auch ein kleines Bildchen einbinden, entweder direkt per img oder über die CSS-Klasse:"tipp" als background-image dann muss man das nicht mehr bei jedem Tipp mit angeben.
~Arano
Danke Arano, werde das gleich mal testen.
Edit:
Werde das so machen. Habe schon angefangen das umzusetzen. Sieht super aus und funktioniert sogar im IE.
Danke!
Werde das so machen. Habe schon angefangen das umzusetzen. Sieht super aus und funktioniert sogar im IE.
Danke!
