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

Frage Entwicklung JavaScript

Mitglied: Florian88

Florian88 (Level 1) - Jetzt verbinden

10.03.2010 um 11:13 Uhr, 3048 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
Batch & Shell

Open Object Rexx: Eine mittlerweile fast vergessene Skriptsprache aus dem Mainframebereich

Information von Penny.Cilin vor 15 StundenBatch & Shell8 Kommentare

Ich kann mich noch sehr gut an diese Skriptsprache erinnern und nutze diese auch heute ab und an noch. ...

Humor (lol)

"gimme gimme gimme": Automatischer Test stolpert über Easter Egg im man-Tool

Information von Penny.Cilin vor 17 StundenHumor (lol)6 Kommentare

Interessant, was man so alles als Easter Egg implementiert. Ist schon wieder Ostern? "gimme gimme gimme": Automatischer Test stolpert ...

MikroTik RouterOS

Mikrotik - Lets Encrypt Zertifikate mit MetaROUTER Instanz auf dem Router erzeugen

Anleitung von colinardo vor 1 TagMikroTik RouterOS8 Kommentare

Einleitung Folgende Anleitung ist aus der Lage heraus entstanden das ein Kunde auf seinem Mikrotik sein Hotspot Captive Portal ...

Sicherheit

Sicherheitslücke in HP-Druckern - Firmware-Updates stehen bereit

Information von BassFishFox vor 1 TagSicherheit1 Kommentar

Ein weiterer Grund, dass Drucker keinerlei Verbindung nach "auswaerts" haben sollen. Unter Verwendung spezieller Malware können Angreifer aus der ...

Heiß diskutierte Inhalte
Windows Server
RDP macht Server schneller???
Frage von JaniDJWindows Server17 Kommentare

Hallo Community, wir betrieben seit geraumer Zeit diverse virtuelle Maschinen und Server mit Windows Server 2012. Leider haben wir ...

Windows 10
Windows 10 dunkler Bildschirm nach Umfallen
Frage von AkcentWindows 1015 Kommentare

Hallo, habe hier einen Windows 10 Rechner der von einem User umgefallen wurde (Beine übers Knie, an den PC ...

Windows 10
Bitlocker nach Verschlüsselung nicht mehr aufrufbar!
gelöst Frage von alexlazaWindows 1013 Kommentare

Hallo, ich besitze ein HP ZBook 17 G4 mit einem Windows 10 Pro Betriebssystem. Bei diesem Problem handelt sich, ...

Batch & Shell
Neuste Datei via PowerShell kopieren
gelöst Frage von kaiuwe28Batch & Shell11 Kommentare

Hallo zusammen, ich hatte mir mit Hilfe der Suche im Forum einen kleinen Code von colinardo rausgesucht und versucht ...