Bereiche in einem Bild anklicken und klickbare Informationen anzeigen

    • Neu

    Ich möchte in einem Bild bestimmte Bereiche klickbar machen, da soll dann eine InfoBox mit weiterführendem Text oder ähnliches kommen, darin soll nicht nur Text, sondern auch Links möglich sein.


    Ich habe mir dazu ein PNG in ein SVG umgewandelt und mit dem HTML Kommando "figure" funktioniert das auch ganz gut. Zumindest das Positionieren und das Verlinken. Was ich nicht zusammenbringe ist eine Art InfoBox, ich habe da anscheinend nur "title" zur Verfügung und da kann ich dann keine Links einbauen und der Title-Tag funktioniert nur mit hoover und nicht bei klick.


    Wer kennt Beispiele wo ich mir so eine ähnlich Lösung ansehen kann?

    Oder wer kann mir raten wie ich prinzipiell weiter vorgehen soll (wobei es mir egal ist ob das über CSS oder JavaScript gelöst wird)?

    Danke für Eure Ideen!

    • Neu

    Hallo wolfgangP

    zuerst mal folgendes... die klassischen imagemaps sind in Zeiten von kleinen hochauflösenden Displays der Smartphones mit Vorsicht zu genießen. Es gibt zahlreiche Lösungen, die zum Ziel führen aber das Ganze auch responsiv zu gestalten ist... nun ja - eine Herausforderung.


    Es gibt mit rect (Definition rechteckiger Bereiche), circle (Definition eines Kreises) und poly (Definition eines Vielecks) verschiedene Möglichkeiten, die map einzuteilen. Ich empfehle dir ein solides Grundverständnis zu bekommen und dir so nach und nach die Gestaltung zu erarbeiten. Hier dazu einige passende Erläuterungen:


    ➥ HTML Area Map von mediaevent.de

    ➥ Image Map von seobility.net


    Wie komplex das Thema dabei ist, verdeutlicht ➥ dieses Beispiel von mediawiki.org.


    Wenn du selbst nach Erklärungen suchst, solltest du darauf achten, den Suchfilter zeitlich auf das letzte Jahr zu setzen, da die Technik sehr alt ist und alte Anleitungen nicht mehr mit modernen Geräten korrespondieren, ➥hier das Beispiel einer Googlesuche "Deutsch" / "max. 1 Jahr".


    Arbeitest du mit einem CMS wie beispielsweise WordPress (...was ich dir heutzutage empfehle), dann gibt es zahlreiche Plugins, welche dir die Funktionalität entsprechend einbauen, wie beispielsweise ➥ hier auf einer meiner kommerziellen Websites. Du baust dabei die reine Funktionalität ein und verfeinerst nur noch Definitionen und Gestaltung mit html5 und css3. Dieses Vorgehen entlastet vom nerv- und zeitraubenden coden ganzer Seiten und ist im Ergebnis sowohl in Hinsicht auf die Suchmaschinenoptimierung (sogenanntes SEO) als auch und besonders für responsives Webdesign ganz erheblich besser.


    Lieben Gruß

    Tunarus

    • Neu

    Sei von mir in unserem kleinen und freundlichen Forum ganz herzlich willkommen geheißen, WolfgangP. Mögest Du Dich hier im Paule ganz, ganz wohl und wie "zuhause" fühlen!


    Falls es Dir danach gelüstete, kannst Du ja ein paar Worte über Dich im Vorstellungen-Subforum einbringen...


    Vorstellungen und Glückwünsche


    :willkommen: :willkommen: :willkommen: :willkommen: :willkommen: :!: :!: :!: :top: :top:

    Meine smarte, die kommenden Zeitalter bescheiden vorwegnehmende Signatur befindet sich noch in ihrem Herstellungsprozeß. Im 1. Quartal 2034 dürfte mit ihrer Lieferung zu rechnen sein.

    Vorläufig zitiere ich Karl Kraus: „Wer jetzt übertreibt, kann leicht in den Verdacht kommen, die Wahrheit zu sagen.“

    Dazu meint Pepino: Cogito, ergo schnurr'.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden