Extension für Responsive "Image Maps"

[marebe]

Hallo Zusammen,

ich hab gerade vergeblich nach einer Contao Extension gesucht, mit der man Responsive Image Maps anlegen kann.
Bevor ich jetzt selber was programmiere, wollte ich mal in die Runde fragen, ob es nicht doch etwas Existierendes gibt und ob das taugt.

Ich stelle mir das so vor, dass der Redakteur ein Bild auswählen kann und dann die Standardseitenlänge der quadratischen "areas" und deren obere, linke Ecke angibt.
Dann noch link, Titel und Beschreibung zu jeder area.
Das müsste dann in %-Angaben umgerechnet werden und entsprechend gestylt werden.

Ich habe zwar das hier gesehen:
jQuery-rwdImageMaps
aber ich möchte die ImageMap ja vom Redakteur anlegen lassen und ich möchte auch keine <map> und <area> tags verwenden.

Schonmal danke vorab für Eure Beiträge.

[marebe]

Habs jetzt doch selber gemacht.
Funktioniert sogar im IE8 und kommt ganz ohne JS aus.
Erst hatte ich Bedenken wegen der Gleitkomma-% Angaben in den Styles, aber scheint überall zu tun.
Im Prinzip habe ich vom ce_image eine spezialisierte Variante gemacht, die die Kartenpunkte und deren Beschreibung ins figcaption integriert.

Falls Interesse besteht, kann ich die Extension ggf. veröffentlichen. Ist jedenfalls schonmal 2-sprachig aufgesetzt.
So sieht das Backend aus:
map.jpg
area.jpg

und das ist das generierte HTML:

<div class="ce_mae_img_map first block">
      <h1>ImageMap - Parkplätze - Beispiel</h1>
<figure class="image_container">
  <picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
          <source srcset="assets/images/b/gmuend-f98a09fb.jpg 1x, assets/images/0/gmuend-dca105d0.jpg 1.5x, assets/images/2/gmuend-6d07e3f2.jpg 2x" media="(min-width: 1170px)">
          <source srcset="assets/images/8/gmuend-c680cbc8.jpg 1x, assets/images/8/gmuend-b2b7f678.jpg 1.5x, assets/images/4/gmuend-4211c774.jpg 2x" media="(min-width: 764px) and (max-width: 979px)">
          <source srcset="files/upload/Test/gmuend.jpg" sizes="80vw" media="(max-width: 763px)">
    <!--[if IE 9]></video><![endif]-->
<img src="assets/images/0/gmuend-bc4396d0.jpg" srcset="assets/images/0/gmuend-bc4396d0.jpg 1x, assets/images/f/gmuend-9457a09f.jpg 1.5x, assets/images/3/gmuend-9b3c7dd3.jpg 2x" alt="">
  </picture>
  <script>
    window.respimage && window.respimage({
      elements: [document.images[document.images.length - 1]]
    });
  </script>
        <figcaption class="caption">
            <a class="area center-bg hasDescription station" href="home.html" title="Bahnhof" data-description-id="areaDesc-7" style="width: 7.5%;height: 11.598%;left: 12.75%;top: 14.82%;background-image: url(files/upload/kartenicons/parking.png);"></a>
            <div id="areaDesc-7" class="description invisible station"><p>Beschr.</p></div>
            <a class="area center-bg hasDescription" href="home.html" title="Privatparkplatz" data-description-id="areaDesc-8" target="_blank" style="width: 2.5%;height: 3.866%;left: 24.5%;top: 58.763%;background-image: url(files/upload/kartenicons/parking.png);"></a>
            <div id="areaDesc-8" class="description invisible"><p>Zu Hause</p></div>
            <a class="area center-bg" href="home.html" title="Noch Mehr Platz" style="width: 3.333%;height: 5.155%;left: 70.667%;top: 44.845%;background-image: url(files/upload/kartenicons/parking.png);"></a>
         </figcaption>
</figure>
</div>

edit: habe das Ganze noch erweitert. Vor allem sind es jetzt nicht mehr zwingend Quadrate und man kann den Bereichen CSS-Klassen mit geben.

Ich hab auf meiner Seite mal ein FE Beispiel gemacht


edit 27.05.2015:
Die Extension ist jetzt unter dem Namen "mae_image_map" veröffentlicht.

[marebe]

hab die Extension veröffentlicht unter dem Namen "mae_image_map"
Neuer Community Thread