Image Map in HTML-Seite gibt keine reaktionsfähige Ausgabe

Question

Ich versuche, ein Bild in HTML-Seite anzuzeigen, in diesem Bild habe ich 6 Kreise auf die alle 6 Kreise ich will sie anklickbar machen.

Ich habe diese Funktionalität erreicht, aber es ist statisch. Es bedeutet, dass, wenn ich dieses Bild in meinem Handy ansehe, alle anklickbaren Kreise nicht an den richtigen Stellen sind.

Wie kann ich Image Map reagieren.

Unten finden Sie den Code i

<div> 

<img usemap="#planetmap" width="588px" height="471px" style="display: block;margin: 0 auto;" src = "domains.png";> 

<map name="planetmap"> 
    <area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" /> 
    <area shape="circle" coords="160,165,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="490,166,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="162,358,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="490,358,66" href="" target="_blank" alt="" /> 
    <area shape="circle" coords="327,451,66" href="" target="_blank" alt="" /> 
</map> 
<div> 


</div> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.rwdImageMaps.min"></script> 
<script>  

    $(document).ready(function() { 
     $('map').imageMapResize(); 
    }); 
</script> 

Answer 1

Was ich tun, wenn man versucht, bin mit etwas reagiert, auf einer Webseite zu machen entweder eines von zwei Dingen ist, ich ein. Verwenden Sie "Medienabfragen" oder b. Verwenden Sie ein Frontend-CSS-Framework wie 'Bootstrap'. Persönlich bevorzuge ich Letzteres. Hier

ist ein Beispiel für eine Medienabfrage, die die Größe des bestimmten Bildes reduzieren, wenn eine bestimmte Bedingung erfüllt ist (dies in Ihrer CSS-Datei geht):

@media (min-width: 700px) 
{ 
    .map { width: 400px; height: 400px; } 
} 

Nun, wenn das Gerät die Breite der trifft Kriterien wird der angegebene CSS-Code auf das Element .map angewendet.

Dies ist ein sehr einfaches Beispiel, aber ich denke, es wird Sie auf den richtigen Weg bringen. Sie können Ihre Medienabfrage ändern, um die Abmessungen der Karte an unterschiedliche Bildschirmgrößen anzupassen. Hier finden Sie weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries