Ralf Gabriel: Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

SELF-Forum

Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

Ralf Gabriel
– Informationen zu den Bewertungsregeln

Folgendes Problem: Hab eine verweissensitive Grafik, ein Image-Map. Wenn ich hier für verschiedene Plätze Hyperlinks vorsehe, sind diese festen Koordinaten im Viereck mit Pixel zu den Ecken definiert. Da ich aber das Bild mit einer prozentualen, relativen Anpassung, keine absolute Pixelangabe, habe, z.B. img {width: 100%; height: auto;}, ist zwar die responsive Darstellung des Bildes je Viewport gegeben, aber wie kann ich dazu passend jeweils die Hyperlinks am richtigen Platz ermöglichen?

Die Hyperlinks sind sonst ja mit fester Pixelzuordnung bei geänderter Grafikdarstellung falsch.

Gibt es da einen Weg?

Beste Grüße Ralf Gabriel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

    Jnnbo
    – Informationen zu den Bewertungsregeln

    Hallo Ralf,

    Gibt es da einen Weg?

    schau dir mal diese Beschreibung an: http://maddesigns.de/responsive-imagemap-2194.html

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

      Gunnar Bittersmann Homepage des Autors (Versionen)
      – Informationen zu den Bewertungsregeln

      @@Jnnbo

      schau dir mal diese Beschreibung an: http://maddesigns.de/responsive-imagemap-2194.html

      Huch, da muss ich doch meinen geschätzten Kollegen glatt mal fragen, ob er schonmal was von SVG gehört hat. >;-)

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

        Matthias Scharwies (Versionen)
        – Informationen zu den Bewertungsregeln

        Servus!

        Unten im Artikel verlinkt er auf: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

        Schönes Wochenende Matthias Scharwies

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Matthias Scharwies

          Unten im Artikel verlinkt er auf: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

          Ich wusste, auf ihn ist Verlass. ;-) Da hätte er das ganze JavaScript-Gedöns auch weglassen können.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Matthias Scharwies

          Unten im Artikel verlinkt er auf: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG

          So in der Art hatte ich das letztens auch gemacht: Ein Click-Dummy, Photoshop-Mockup als Bild (width: 100%), clickbare Flächen mit SVG (die können dann genauso einfach auch Kreise oder Polygone sein).

          Und responsive war das Ding auch: Bei einem Breakpoint (im style-Element im SVG) wurde ein anderes Bild mit entsprechend anderen clickbaren Flächen angeschaltet.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

        Jnnbo
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar,

        Huch, da muss ich doch meinen geschätzten Kollegen glatt mal fragen, ob er schonmal was von SVG gehört hat.

        arbeitest du in dieser Agentur? :o

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Verweissensitive Grafik, relative Anpassung der Hyperlinks an Grafik je Viewport

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Jnnbo

          Huch, da muss ich doch meinen geschätzten Kollegen glatt mal fragen, ob er schonmal was von SVG gehört hat.

          arbeitest du in dieser Agentur? :o

          Nö. Ich schätze den Sven aber trotzdem. Und natürlich hat er schon das Eine oder Andere von SVG gehört.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln