Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Text bei Mouseover in besstimmten Bereichen anzeigen?

Frage Entwicklung Webentwicklung

Mitglied: Alternativende

Alternativende (Level 2) - Jetzt verbinden

17.01.2014, aktualisiert 25.01.2014, 4114 Aufrufe, 4 Kommentare

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!
Mitglied: colinardo
17.01.2014, aktualisiert 18.01.2014
Hallo Alternativende,
das gewünschte könntest du bspw. mit einer ImageMap (Online-ImageMap-Generator) realisieren, mit jQueryUI und einem Tooltip. Hier ein Beispiel zu deiner Aufgabe.

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
Bitte warten ..
Mitglied: Arano
LÖSUNG 18.01.2014, aktualisiert 25.01.2014
Einen wunderschönen zusammen

Alternativ geht es auch __ohne Javascript__:
01.
<html> 
02.
  <head> 
03.
    <title></title> 
04.
    <style type="text/css"> 
05.
      <!-- 
06.
        #img-wrapper       { border:2px solid #ff0000; position:absolute; } 
07.
        .tipp              { border:1px solid #00ff00; position:absolute; cursor:help; } 
08.
        .tipp > span       { display:none; border:1px solid #000000; background-color:#ecffc0; position:absolute; top:0px; left:15px; white-space:nowrap; } 
09.
        .tipp:hover > span { display:inline;  } 
10.
      --> 
11.
    </style> 
12.
  </head> 
13.
  <body> 
14.
   
15.
  <p> 
16.
    Absatz<br> 
17.
    Absatz 
18.
    <!-- - -> 
19.
      <br> 
20.
      Absatz<br> 
21.
      Absatz 
22.
    <!-- --> 
23.
  </p> 
24.
   
25.
  <div id="img-wrapper"> 
26.
    <img src="none" width="800" height="600"> 
27.
    <div class="tipp" style="top:10px; left:50px;"> 
28.
      ?? <span>Hilfetext</span> 
29.
    </div> 
30.
    <div class="tipp" style="top:100px; left:50px;"> 
31.
      ?? <span>Hilfetext Hilfetext Hilfetext<br>Hilfetext Hilfetext</span> 
32.
    </div> 
33.
    <div class="tipp" style="top:150px; left:50px;"> 
34.
      ?? <span>Hilfetext</span> 
35.
    </div> 
36.
  </div> 
37.
   
38.
   
39.
  </body> 
40.
</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
Bitte warten ..
Mitglied: Alternativende
20.01.2014 um 08:24 Uhr
Danke Arano, werde das gleich mal testen.
Bitte warten ..
Mitglied: Alternativende
20.01.2014 um 11:10 Uhr
Edit:
Werde das so machen. Habe schon angefangen das umzusetzen. Sieht super aus und funktioniert sogar im IE.

Danke!
Bitte warten ..
Ähnliche Inhalte
JavaScript
gelöst Datumabhängiger Text in HTML anzeigen (4)

Frage von adm2015 zum Thema JavaScript ...

Microsoft Office
gelöst Excel: Text in Zellbereich prüfen mit Vergleichstext ggf. mit Exact-Funktion (5)

Frage von Michi1 zum Thema Microsoft Office ...

VB for Applications
gelöst Excel - VBA - Fusszeile Text und Grafik (1)

Frage von Juckie zum Thema VB for Applications ...

Webentwicklung
gelöst Foto Upload und Default Text einfügen (12)

Frage von smackee zum Thema Webentwicklung ...

Neue Wissensbeiträge
Windows Update

Microsoft Update KB4034664 verursacht Probleme mit Multimonitor-Systemen

(2)

Tipp von beidermachtvongreyscull zum Thema Windows Update ...

Viren und Trojaner

CNC-Fräsen von MECANUMERIC werden (ggf.) mit Viren, Trojanern, Würmern ausgeliefert

(4)

Erfahrungsbericht von anteNope zum Thema Viren und Trojaner ...

Windows 10

Windows 10: Erste Anmeldung Animation deaktivieren

(3)

Anleitung von alemanne21 zum Thema Windows 10 ...

Heiß diskutierte Inhalte
Netzwerkprotokolle
gelöst Leiten "dumme" Switches VLAN-Tags mit durch? (26)

Frage von coltseavers zum Thema Netzwerkprotokolle ...

Windows Server
gelöst Neues KB für W10 1607 und W2K16 wieder mal nicht im WSUS 3.0, hat das noch jemand? (16)

Frage von departure69 zum Thema Windows Server ...

Netzwerkgrundlagen
Kann auf Freigabe nicht Zugreifen (15)

Frage von leon123 zum Thema Netzwerkgrundlagen ...

Router & Routing
FTTH bzw FTTB Router (13)

Frage von ukulele-7 zum Thema Router & Routing ...