Top-Themen

Aktuelle Themen (A bis Z)

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, 4218 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
Datumabhängiger Text in HTML anzeigen
gelöst Frage von adm2015JavaScript4 Kommentare

Hallo Zusammen, ich bin verzweifelt auf der Suche nach einem JavaScript, welches einen bestimmten Text zu einem bestimmten Datum ...

Visual Studio
FolderBrowserDialog - SelectedPath in sichtbaren Bereich anzeigen
gelöst Frage von Rene1976Visual Studio6 Kommentare

Hallo, Wir haben beim FolderBrowserDialog mit vb.net über SelectedPath einen Netzwerkpfad voreingestellt. Dieser ist leider nie im sichtbaren Bereich ...

Batch & Shell
Text Datei bestimmte Bereiche lesen und in neue Text schreiben
gelöst Frage von Doktore1Batch & Shell3 Kommentare

Hallo @ all, bin neu hier und habe sehr wenig Erfahrung mit batch Skripten. Ich würde mich sehr freuen ...

Microsoft Office
Bereich mit variablen Bereich in einer anderen Tabelle
gelöst Frage von mreskeMicrosoft Office7 Kommentare

Hallo ich stehe gerade mit folgendem Problem auf dem Schlauch und hoffe, jemand hat eine Idee: Ich möchte die ...

Neue Wissensbeiträge
Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 2 TagenWindows 106 Kommentare

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Sicherheits-Tools

Achtung: Sicherheitslücke im FortiClient VPN-Client

Tipp von kgborn vor 2 TagenSicherheits-Tools

Ich weiß nicht, wie häufig die NextGeneration Endpoint Protection-Lösung von Fortinet in deutschen Unternehmen eingesetzt wird. An dieser Stelle ...

Internet

USA: Die FCC schaff die Netzneutralität ab

Information von Frank vor 2 TagenInternet5 Kommentare

Jetzt beschädigt US-Präsident Donald Trump auch noch das Internet. Der neu eingesetzte FCC-Chef Ajit Pai ist bekannter Gegner einer ...

DSL, VDSL

ALL-BM200VDSL2V - Neues VDSL-Modem mit Vectoring von Allnet

Information von Lochkartenstanzer vor 2 TagenDSL, VDSL2 Kommentare

Moin, Falls jemand eine Alternative zu dem draytek sucht: Gruß lks

Heiß diskutierte Inhalte
Batch & Shell
Kann man mit einer .txt Datei eine .bat Datei öffnen?
gelöst Frage von HelloWorldBatch & Shell20 Kommentare

Wie schon im Titel beschrieben würde ich gerne durch einfaches klicken auf eine Text oder Word Datei eine Batch ...

Router & Routing
OpenWRT bzw. L.E.D.E auf Buffalo WZR-HP-AG300H - update
gelöst Frage von EpigeneseRouter & Routing11 Kommentare

Guten Tag, ich habe auf einem Buffalo WZR-HP-AG300H die alternative Firmware vom L.E.D.E Projekt geflasht. Ich bin es von ...

LAN, WAN, Wireless
WLAN Reichweite erhöhen mit neuer Antenne
gelöst Frage von gdconsultLAN, WAN, Wireless9 Kommentare

Hallo, ich besitze einen TL-WN722N USB-WLAN Dongle mit einer richtigen Antenne. Ich frage mich jetzt ob man die Reichweite ...

Windows Server
Ping auf einen bestimmten Server nicht möglich
gelöst Frage von a.thierWindows Server7 Kommentare

Hallo, ich habe folgendes Problem. srv-dc1: Ping srv-nav > geht Ping srv-exchange > geht nicht srv-exchange: Ping srv-dc1 > ...