मैं एक उत्तरदायी साइट पर काम कर रहा हूं और छवि मानचित्र के साथ एक समस्या में आया हूं। ऐसा लगता है कि छवि मानचित्र प्रतिशत आधारित समन्वय के साथ काम नहीं करते हैं। थोड़ी सी गुगलिंग के बाद मुझे एक जेएस वर्कअराउंड मिला - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html। हालांकि मैं चाहता हूं कि साइट जेएस अक्षम के साथ काम करे।उत्तरदायी सीएसएस छवि एंकर टैग - छवि मानचित्र शैली
तो उन संभावनाओं को समाप्त करने के बाद मैंने छवियों पर अपेक्षाकृत स्थित एंकर टैग का उपयोग करने के लिए एक ही चीज़ करने के लिए देखने का फैसला किया। आईएमओ वैसे भी यह एक बेहतर विकल्प है। मैंने छवि पर एंकर टैग को प्रतिशत आधारित स्थिति और आकार के साथ रखने की कोशिश की है, लेकिन जब भी मैं ब्राउज़र को पुन: सहेजता हूं तो एंकर टैग छवि पर असमान रूप से आगे बढ़ते हैं।
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
सीएसएस:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
यहाँ वर्णन करने के लिए मैं क्या मतलब है एक jsFiddle है - http://jsfiddle.net/wAf3b/10/। जब मैं HTML बॉक्स का आकार बदलता हूं तो सबकुछ खराब हो जाता है।
किसी भी मदद की बहुत सराहना की।
शीर्ष और बाएं के बजाय मार्जिन-बाएं और मार्जिन-टॉप के साथ प्रयास करें। –