Hallo,
mir ist aufgefallen, dass die Frankreichkarte auf Geräten kleiner 800px Bildschirmbreite nicht mehr korrekt angezeigt wird.
Man kann das relativ einfach ein wenig eleganter mit SVG-Imagemaps lösen.
Wenn ihr den folgenden Codeschnipsel in eure default.content.php statt der ursprünglichen Imagemap einpflegt, wird die Karte wunderbar skaliert.
In der base.css könnt ihr dann noch die Ränder des Selektors "figure" einstellen, damit das auch sauber in den Container passt.
lg
KC
HTML
- <figure id="imagemap">
- <svg viewBox="0 0 662 480" >
- <defs>
- <style>
- rect:hover {
- fill: blue;
- opacity:0.5;
- }
- </style>
- </defs>
- <image width="662" height="480" xlink:href="http://www.eureURL.de/img/frankreich.png">
- <title>Austragungsorte in Frankreich</title>
- </image>
- <a xlink:href="https://de.wikipedia.org/wiki/Lyon" target="_blank">
- <rect x="348" y="140" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Lille" target="_blank">
- <rect x="416" y="33" opacity="0" width="20" height="30" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Lens" target="_blank">
- <rect x="389" y="43" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Saint-Denis_(Seine-Saint-Denis)" target="_blank">
- <rect x="358" y="68" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Paris" target="_blank">
- <rect x="333" y="76" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Saint-%C3%89tienne" target="_blank">
- <rect x="320" y="151" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Nizza" target="_blank">
- <rect x="363" y="196" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Marseille" target="_blank">
- <rect x="311" y="212" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Toulouse" target="_blank">
- <rect x="202" y="187" opacity="0" width="20" height="20" />
- </a>
- <a xlink:href="https://de.wikipedia.org/wiki/Bordeaux" target="_blank">
- <rect x="171" y="155" opacity="0" width="20" height="20" />
- </a>
- </svg>
- <figcaption>Austragungsorte der EM 2016 - Für weitere Informationen, klickt auf die Punkte!</figcaption>
- </figure>
