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?

Mitglied: Alternativende

Alternativende (Level 2) - Jetzt verbinden

17.01.2014, aktualisiert 25.01.2014, 5171 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
VB for Applications

PDF Text aus bestimmten Bereich und die Seitenzahl in Excel schreiben

Frage von VBABeginnerVB for Applications

Mahlzeit, Ich bin neu hier und bräuchte euren Rat. Ich möchte einen betimmten, immer wiederkehreneden Textbereich und die Seitennummer ...

Netzwerkgrundlagen

IP-Bereich vergrößern und DHCP-Bereich verlagern

gelöst Frage von knallsterNetzwerkgrundlagen11 Kommentare

Hallo zusammen, ich habe hier momentan ein 172.16.1.0/24-Netz, allerdings werden die Adressen langsam knapp. Meine Idee ist jetzt, auf ...

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 ...

Monitoring

PRTG Monitoring IP-Bereich

gelöst Frage von supertuxMonitoring7 Kommentare

Hallo, ich habe mir PRTG Monitor installiert, soweit läuft über die Domain-Anmeldung auch alles und die Daten sind auch ...

Neue Wissensbeiträge
Viren und Trojaner

Staatstrojaner soll auch per Einbruch installiert werden können

Information von transocean vor 1 TagViren und Trojaner2 Kommentare

Moin, Bundesinnenminister Horst Seehofer will dem Verfassungsschutz Wohnungseinbrüche erlauben, um den geplanten Staatstrojaner zu installieren. Gruß Uwe

Windows 7
Win7 Update scheitert KB4512506
Information von infowars vor 1 TagWindows 7

Falls jemand auch das Problem hat mit dem: Monatliches Sicherheitsqualitätsrollup für Windows 7 für x64-basierte-Systeme (KB4512506) Das scheint mit ...

Humor (lol)
Wenn hacken nach hinten los geht
Information von em-pie vor 2 TagenHumor (lol)5 Kommentare

Moin, weil heute Freitag ist, nachfolgender kurzer Artikel zum schmunzeln:) l+f: NULL ist ein notorischer Falschparker

Windows Update
Windows: August 2019 Patchday-Probleme
Information von kgborn vor 3 TagenWindows Update3 Kommentare

Ich kippe mal einige kurze Informationen hier rein - vielleicht hilft es Betroffenen. Die August 2019-Updates für Windows haben ...

Heiß diskutierte Inhalte
Switche und Hubs
Glasfaser-Anschluss Telekom muss verteilt werden
Frage von cansoniSwitche und Hubs29 Kommentare

Vorweg: Bin nur Anwender und kein Experte Die Situation: Der Vermieter stellt einen Glasfaseranschluss in der Wohnung bereit. Wir ...

Ubuntu
Download manchmal langsam oder komplette Abbrüche bzw. Videos spielen nicht bis zum Schluss
Frage von stefanstpUbuntu18 Kommentare

Immer wieder berichten unsere Kunden, dass Downloads abbrechen oder super langsam sind oder Videos nicht abgespielt werden können bzw. ...

Hyper-V
VMs von Hyper-V auf externer Festplatte
Frage von SnowbirdHyper-V18 Kommentare

Hallo, ich möchte gerne von VirtualBox auf Hyper-V umsteigen und würde auch gerne weiterhin meine VMs auf der externen ...

Festplatten, SSD, Raid
SSDs durch Lagerung ohne Strom nach 6 Monaten defekt?!?
gelöst Frage von GlobetrotterFestplatten, SSD, Raid16 Kommentare

Moin Gemeinde Ich hatte gerade nen Trauerspiel Habe hier etliche NAS-Geräte herumfahren welche ich mal auf die Seite gelegt ...