3
Image Map mit Navigation
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:
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:
<body>
<img src="raumplan.JPG" alt="Raumplan" usemap="#Raumplan">
<map name="Raumplan">
<area shape="rect" coords="120,146,192,202"
href="http://www.maps.google.de/" alt="Bild" title="Name1">
</map>
</body>
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 137868
Url: https://administrator.de/contentid/137868
Printed on: April 25, 2024 at 10:04 o'clock
3 Comments
Latest comment
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.
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.
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
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
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
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
