benutzerkontoersteller
Grünschnabel
Bei mir funktioniert leider auch die Skalierung der IMAGEMAP nicht. Das Bild wird wunderbar eingepasst - die Links ziehen nicht mit. Gibt es denn Beipiele, wo die Link-Areas wie gewünscht skaliert wurden?
Folge dem Video um zu sehen, wie unsere Website als Web-App auf dem Startbildschirm installiert werden kann.
Anmerkung: Diese Funktion ist in einigen Browsern möglicherweise nicht verfügbar.
Das eingangs genannte Beispiel http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html funktioniert wie gewünscht.Bei mir funktioniert leider auch die Skalierung der IMAGEMAP nicht. Das Bild wird wunderbar eingepasst - die Links ziehen nicht mit. Gibt es denn Beipiele, wo die Link-Areas wie gewünscht skaliert wurden?
<body style="font-family: Verdana, Arial, Georgia; font-size: .9em; color: #ffffff; background-color: #000000;">
<div style="margin-left:auto; margin-right:auto; text-align: center; top: 20px; position: relative; max-width: 450px;">
<div>
<img src="elterngsdd.svg" width="450" height="800" usemap="#map" alt="" />
<map id="map" name="map">
<area shape="rect" alt="" title="" coords="0,0,200,380" href="0.htm" target="_self" />
<area shape="rect" alt="" title="" coords="200,0,450,380" href="1.htm" target="_self" />
<area shape="rect" alt="" title="" coords="0,380,200,580" href="ag.php" target="_self" />
<area shape="rect" alt="" title="" coords="200,380,450,580" href="3.htm" target="_self" />
<area shape="rect" alt="" title="" coords="0,580,450,800" href="4.htm" target="_self" />
</map>
</div>
<div style="position: absolute; top: 98%">
<div style="text-align: left; position: relative; max-width: 90%; padding-left: 5%;">
<p>text</p>
</div>
</div>
</div>
</div>
<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>