nicht angemeldet
Image Map bei Wordpress funktioniert nicht
Matthias Apsel
Camping_RIDER
Gunnar BittersmannGuten Abend, Meine ImageMap funktioniert im normalen Browser (Safari,Chrome) perfekt, wenn ich diesen jedoch bei WordPress verwenden will, sind die Areas verschoben. Habt ihr eine Lösung dafür?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Deutschland</title>
</head>
<body>
<p>
<img src="https://68.media.tumblr.com/c7752361f2c90500e6fc6373bf93857b/tumblr_ok73wsHaqO1w1ynx3o1_1280.jpg" width="733" height="1023" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Hans -->
<area shape="rect" coords="571,339,652,373" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="479,485,591,524" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="492,137,583,173" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="315,204,432,260" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="333,109,389,145" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="248,98,326,151" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="184,256,294,292" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="346,369,484,410" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="177,392,301,433" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="311,451,418,487" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="47,467,151,525" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="23,549,121,583" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="193,547,297,584" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="192,609,327,644" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="68,632,181,658" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="68,661,180,687" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="185,659,313,691" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="333,750,453,786" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="33,691,97,746" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="99,731,156,787" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="159,777,307,811" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="186,729,276,770" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="346,857,449,893" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="166,829,301,861" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="150,900,242,945" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="385,920,466,951" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
<area shape="rect" coords="360,953,467,990" target= "_blank" href="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" />
</map>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>
</body>
</html>
-
Hallo Hans,
Meine ImageMap funktioniert im normalen Browser (Safari,Chrome) perfekt, wenn ich diesen jedoch bei WordPress verwenden will, sind die Areas verschoben. Habt ihr eine Lösung dafür?
Wenn der folgende Quelltext derjenige ist, der bei dir ohne WP funktioniert, funktioniert er sicher auch bei jedem von uns ohne WP.
Um beurteilen zu können, was auf der WP-Seite schiefläuft, müsste man einen Link zur entsprechenden Seite haben.
Bis demnächst
Matthias -
Aloha ;)
Meine ImageMap funktioniert im normalen Browser (Safari,Chrome) perfekt, wenn ich diesen jedoch bei WordPress verwenden will, sind die Areas verschoben. Habt ihr eine Lösung dafür?
Meine Kristallkugel sagt mir, dass in deiner Wordpress-Umgebung möglicherweise das Bild, auf dem deine ImageMap liegen soll, anders skaliert ist (z.B. durch ein Stylesheet, das in Wordpress zusätzlich läuft, o.ä.). Das wäre zumindest eine mögliche Erklärung, die mir eben durch den Kopf schoss. Abgesehen davon kann ich dich nur auf das verweisen, was Matthias bereits sagte.
Grüße,
RIDER
-
@@Camping_RIDER
Meine Kristallkugel sagt mir, dass in deiner Wordpress-Umgebung möglicherweise das Bild, auf dem deine ImageMap liegen soll, anders skaliert ist (z.B. durch ein Stylesheet, das in Wordpress zusätzlich läuft, o.ä.).
Dazu braucht man kein Kristall, gewöhnliches Glas tut’s auch. ;-)
Die Koordinaten bei
area-Elementen kann man nur in Pixeln angeben, die bei Größenänderung des Bildes nicht mitskalieren. Da braucht man responsive image maps.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-