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

Image Map mit Navigation

Frage Entwicklung JavaScript

Mitglied: Florian88

Florian88 (Level 1) - Jetzt verbinden

10.03.2010 um 11:13 Uhr, 3031 Aufrufe, 3 Kommentare

Hallo zusammen,

ich habe eine Bilddatei mit diversen Verweisen erstellt (siehe verkürzten Quellcode).

Nun möchte ich gerne, dass automatisch rechts neben der Grafik oder sogar in der Grafik ein Fenster bzw. Art "Sprechblase" (wie bei GoogleMaps) mit speziellen Informationen angezeigt werden (pro Verweis).
Es soll eine Telefonnr., E-Mailadresse, Bild und Anschrift angezeigt werden.

Wie kann ich diese Sprechblase bzw. rechte extra Fenster erstellen mit den speziellen Informationen (pro Verweis).

Vielen Dank für die Hilfe.

Gruß

Florian

Quellcode:
01.
<body> 
02.
  <img src="raumplan.JPG" alt="Raumplan" usemap="#Raumplan"> 
03.
  <map name="Raumplan"> 
04.
    <area shape="rect" coords="120,146,192,202" 
05.
          href="http://www.maps.google.de/" alt="Bild" title="Name1"> 
06.
  </map> 
07.
</body> 
08.
 
Mitglied: RedWraith
10.03.2010 um 11:50 Uhr
Hi Florian,

die erste, einfachste und warscheinlich zu simple Möglichkeit, wäre es, die Infos ins Alt="" Tag zu schreiben. Das ist etwas simpel, sieht nicht sehr schön aus, da die Formatierungsmöglichkeiten im Alt="" begrenzt sind und jeder "eingefleischte" Webdesigner wird dir für den Missbrauch den Hals umdrehen.

Die zweite Möglichkeit wäre eine Kombination aus ein wenig CSS und eine gute Portion Javascript.

Das Ganze würde so funktionieren:
Du erstellst ein <div>, welches unsichtbar, leer und aus dem Dokumentenfluß entfernt wurde. Dann schreibst du ein Script in JS, welches anspringt, sobald du mit der Maus über eines der Felder gehst. Das Script positioniert, befüllt und macht das <div> sichtbar bzw. lässt es wieder verschwinden, wenn du den Bereich verlässt. Das Ganze setzt allerdings voraus, dass man für die map areas Ereignisse hat, die beim Betreten bzw. Verlassen des Bereichs ausgelöst werden.

Ich kann dir jetzt kein Beispiel geben, weil ich sowas nicht aus dem Kopf heraus schreiben kann, aber du kannst mal nach Floating Boxes bzw. Schwebenden Menüs im Webdesign googlen, ich bin sicher du findest dort Beispiele, die du abwandeln kannst.
Bitte warten ..
Mitglied: Florian88
10.03.2010 um 16:28 Uhr
Hi RedWraith,

vielen Dank für die schnelle Antwort.

Hast Du vielleicht eine Beispiel Webseite, wo die zweite Methode angewandt wird?

Ich kann mir diesen Lösungsweg gut vorstellen aber habe keine Vorstellung, wie ich den Div-Tag in den JS Quellcode einbinden soll.

Danke nochmal für die Hilfe.

Florian
Bitte warten ..
Mitglied: curlybiggelow
11.03.2010 um 09:12 Uhr
Hallo Florian,

im xhtml (CSS) gibt es genau dafür eine wirklich simple Lösung: den acronym-tag. Der löst beim mouseover einen title aus. Natürlich gibt es auch optisch elegantere Lösungen (z.B. über ein Script). Das führt aber immer dazu, dass Einschränkungen im Accessability hinzunehmen sind. Wenn die betroffene Website also maximale Funktion und maximale Erreichbarkeit (Accessability) erhalten soll - keep it simple.

Sorry - sehe gerade, dass deine Lösung in deinem Quelltext ja bereits vorhanden ist, weil nicht ein text, sondern eine Grafik mit Zusatzinfos versehen werden soll ... tja, da war ich wohl etwas unaufmerksam, was zwar nichts an der Richtigkeit der KIS-Regel ändert, aber auf allgemeine Zerstreutheit zu so früher Stunde hindeutet
Bitte warten ..
Ähnliche Inhalte
Microsoft Office
gelöst Office365 Business Premium in Image (3)

Frage von MegaGiga zum Thema Microsoft Office ...

Windows Installation
Referenz Windows 7 Image (VM) für WDS Betankung Lizensierung?

Frage von r4wdmin zum Thema Windows Installation ...

Backup
Acronis True Image 2016 - Restore dauert eine Ewigkeit (6)

Frage von Clarissa zum Thema Backup ...

JavaScript
Image laden, nur wenn noch nicht geladen (1)

Frage von Power-Poler zum Thema JavaScript ...

Neue Wissensbeiträge
Peripheriegeräte

Was beachten bei der Wahl einer USV Anlage im Serverschrank

(2)

Tipp von zetboxit zum Thema Peripheriegeräte ...

Windows 10

Das Windows 10 Creators Update ist auf dem Weg

(5)

Anleitung von BassFishFox zum Thema Windows 10 ...

Administrator.de Feedback

Tipp: Ungelöste Fragen ohne Antwort in Tickeransicht farblich hinterlegen

Tipp von pattern zum Thema Administrator.de Feedback ...

Viren und Trojaner

Neue Magazin Ausgabe: Malware und Angriffe abwehren

Information von Frank zum Thema Viren und Trojaner ...

Heiß diskutierte Inhalte
Windows Systemdateien
Warum System auf "C:" (29)

Frage von DzumoPRO zum Thema Windows Systemdateien ...

Windows Server
gelöst Update BackupExec 2015 auf 2016 führt zu SQL-Server Problem (16)

Frage von montylein1981 zum Thema Windows Server ...

Cloud-Dienste
gelöst Bitcoins minen über Nacht? (16)

Frage von 1410640014 zum Thema Cloud-Dienste ...

LAN, WAN, Wireless
Cisco SG200: Auf bestimmtem vLAN bestimmte TCP-Ports sperren (16)

Frage von SarekHL zum Thema LAN, WAN, Wireless ...