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

CMS

Magento Navigation differenziert organisieren

Frage von ischbindebaetmaenCMS2 Kommentare

Hallo Admins, ich stehe gerade vor einer kleinen Herausforderung: Ich möchte neben den Shop Kategorien in einer Vertikalen Navigation ...

CSS

CSS Klasse für Multilevel Navigation

Frage von wescraven07CSS2 Kommentare

Moin Entwickler, bin noch Anfänger und habe folgende Frage: Ich habe ein Multilevelnavigation und will eine CSS Klasse schreiben ...

Neue Wissensbeiträge
Windows 7
Updategängelung auf Windows 10, die zweite
Information von Penny.Cilin vor 21 StundenWindows 7

Hallo, da Windows 7 im kommenden Jahr nicht mehr supportet wird, werden Nutzer von Window 7 home premium wieder ...

Internet
EU-Urheberrechtsreform: Zusammenfassung
Information von Frank vor 3 TagenInternet1 Kommentar

Auf golem.de gibt es eine Analyse von Friedhelm Greis, der das Thema EU-Urheberrechtsreform gut und strukturiert zusammenfasst. Zwar haben ...

Microsoft Office

Office365 Schwachstellen bei Sicherheit und Datenschutz

Information von Penny.Cilin vor 4 TagenMicrosoft Office7 Kommentare

Auf Heise+ gibt es einen Artikel bzgl. Office365 Schwachstellen. Das ist noch ein Grund mehr seine Daten nicht in ...

Sicherheit
Schwachstellen in VPN Clients
Tipp von transocean vor 6 TagenSicherheit2 Kommentare

Moin, es gibt Sicherheitslücken bei VPN Clients namhafter Hersteller, wie man hier lesen kann. Gruß Uwe

Heiß diskutierte Inhalte
Virtualisierung
Unix System virtualisieren
Frage von BananenmeisterVirtualisierung10 Kommentare

Hallo Zusammen, Ich möchte gerne eine Virtualisierungs-Software auf meinem kleinen ML Server installieren um einige Unix Systeme zu virtualisieren. ...

Hyper-V
Chaosbeseitigung in Domainlandschaft
Frage von Rolf935Hyper-V10 Kommentare

Hallo zusammen, ich hätte gerne mal ein paar praktische Tipps oder Hinweise. Derzeit haben wir einen NAS als Fileserver ...

LAN, WAN, Wireless
Lancom und VLANs
Frage von TimmheLAN, WAN, Wireless10 Kommentare

Hallo an alle ich habe momentan ein sehr merkwürdiges problem bei dem ich nicht mehr weiter komme und hoffe ...

Notebook & Zubehör
Hardware defekt ?
Frage von mausemuckelNotebook & Zubehör9 Kommentare

Hallo und ein schönes Osterfest an alle. Ich benötige mal euer Schwarm wissen. Ich habe hier ein Notebook Lenovo ...