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

Image Map mit Navigation

Mitglied: Florian88

Florian88 (Level 1) - Jetzt verbinden

10.03.2010 um 11:13 Uhr, 3055 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
JavaScript
JavaScript Map
Frage von tobmesJavaScript7 Kommentare

Hi, ich bins mal wider :). Ich spiele immernoch mit JavaScript herum und hänge jetzt mal wieder. Ich habe ...

E-Business
Google Map Marker
gelöst Frage von tomi93E-Business6 Kommentare

Hallo, ich habe für ein Restaurant bei uns eine Website eingerichtet und wollte im zuge dessen auch mit Google ...

Windows Server

Performenc-Diagnose von Win2008Server mit MAP

Frage von ManneKLWindows Server

Hallo, will mit dem Microsoft Assessment and Planing Toolkit Server (Windows 2008 SP2) in der Domäne die Hardware-Performenc Metrics ...

Google Android

Aus Navigation drawer Activity in andere activity wechseln

Frage von bahnhofGoogle Android1 Kommentar

Hallo, ich habe eine App mit Navigation drawer erstellt. In einer meine Activity's, die ich dem Navigation drawer zugeordnet ...

Neue Wissensbeiträge
Windows 10

Neue Sicherheitslücke in Windows 10 (Version 1709) durch Google öffentlich geworden

Information von kgborn vor 12 StundenWindows 10

Vor ein paar Tagen haben Googles Sicherheitsforscher vom Projekt Zero eine Sicherheitslücke im Edge-Browser publiziert. Jetzt wurde eine weitere ...

iOS
IOS 11.2.6 verfügbar
Information von sabines vor 18 StundeniOS

Mit dem Update soll der Bug behoben werden, bei dem eine bestimmte Zeichenkette IOS zum Absturz gebracht hat.

Sicherheit
Sicherheitsrisiko: Die Krux mit 7-Zip
Information von kgborn vor 1 TagSicherheit8 Kommentare

Bei vielen Anwendern ist das Tool 7-Zip zum Entpacken von Archivdateien im Einsatz. Die Software ist kostenlos und steht ...

Internet

Datendealing im WWW Tracking Methoden immer brutaler

Information von sabines vor 1 TagInternet

Interessanter Artikel zum Thema Tracking im WWW und die immer "besseren" Methoden des Trackings. Professor Arvind Narayanan (Princeton-Universität) betreibt ...

Heiß diskutierte Inhalte
Router & Routing
LANCOM VPN CLIENT einrichten
Frage von Finchen961988Router & Routing27 Kommentare

Hallo, ich habe ein Problem und hoffe ihr könnt mir helfen, wir haben einen Kunden der hat einen Speedport ...

Windows Server
AD DS findet Domäne nicht, behebbar?
Frage von schapitzWindows Server25 Kommentare

Guten Tag, ich habe bei einem Kunden ein Problem mit den AD DS. Umgebung ist folgende: Windows Server 2016 ...

LAN, WAN, Wireless
VPN Cisco ASA5505 PaloAlto PA-200
gelöst Frage von YannoschLAN, WAN, Wireless22 Kommentare

Hallo zusammen, ich würde gerne ein Site-to-Site VPN zwischen den beiden Standorten aufbauen. PaloAlto PA200 Internetanschluss Deutsche Telekom GK ...

SAN, NAS, DAS
Qnap TS-453S Pro - Anbindung Active Directory
Frage von JuckieSAN, NAS, DAS13 Kommentare

Hallo zusammen, ich habe hier eine Qnap TS-453S Pro die sich mal so absolut gar nicht in das Active ...