उत्तरदायी सीएसएस छवि एंकर टैग - छवि मानचित्र शैली

मैं एक उत्तरदायी साइट पर काम कर रहा हूं और छवि मानचित्र के साथ एक समस्या में आया हूं। ऐसा लगता है कि छवि मानचित्र प्रतिशत आधारित समन्वय के साथ काम नहीं करते हैं। थोड़ी सी गुगलिंग के बाद मुझे एक जेएस वर्कअराउंड मिला - 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 बॉक्स का आकार बदलता हूं तो सबकुछ खराब हो जाता है।

किसी भी मदद की बहुत सराहना की।

स्रोत

2012-11-21 kabatwa

शीर्ष और बाएं के बजाय मार्जिन-बाएं और मार्जिन-टॉप के साथ प्रयास करें। –

आपके द्वारा पोस्ट किए गए पहेली में आपके सीएसएस के साथ कुछ समस्याएं थीं (साथ ही साथ लापता बंद div टैग)। यह सुनिश्चित करने के बाद कि #block अपेक्षाकृत स्थित था, 100% ऊंचाई नहीं, और आपके एंकर ब्लॉक/पूरी तरह से स्थित थे, मैं टैग को ब्लॉक के साथ स्थानांतरित करने में सक्षम था।

http://jsfiddle.net/wAf3b/24/

सीएसएस

html, body { 
    height: 100%; 
} 

#block{ float:left; width:100%; max-width: 400px; position: relative; } 

#content{ 
    height: 100%; 
    min-height: 100%; 
} 

#block img { 
    max-width: 100%; 
    display: inline-block; 
} 

a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);} 
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}

एचटीएमएल

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <title>Bulky Waste</title> 
</head> 
<body> 
    <div id="content"> 
     <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> 
    </div><!--/content--> 
</body> 
</html>

एक महत्वपूर्ण थी:

यहाँ अद्यतन बेला है नए एचटीएमएल के साथ नोट करने के लिए DOCTYPE का उपयोग है। किसी कारण से, कुछ ब्राउज़र इसे पसंद नहीं करते हैं जब इसे पूंजीकृत नहीं किया जाता है।

स्रोत

2012-11-21 19:29:25 Kyle

http://stackoverflow.com/questions/7020961/uppercase-or-lowercase-doctype – Jawad

@ जवाड़ लिंक के लिए धन्यवाद। मैंने व्यक्तिगत रूप से सोचा था कि डॉक्टरेट घोषणा भी असंवेदनशील थी, लेकिन एक साल पहले एक मुद्दा था जिसे इसे पूंजीकरण द्वारा तय किया गया था। – Kyle

कितनी बार बदलते हैं? यह केवल कुछ साल पहले ही हर कोई चौंकाने वाला एचटीएमएल था और एक्सएचटीएमएल पसंद करता था। अब सब लोग HTML5 सिंटैक्स के वैगन पर वापस आ गए हैं। – Jawad

बिल्कुल-स्थित तत्व तत्व लेआउट का हिस्सा नहीं हैं, इसलिए वे अपने माता-पिता से संबंधित आयामी गुणों का उत्तराधिकारी नहीं हो सकते हैं। आप जो चाहते हैं उसे करने के लिए आपको जावास्क्रिप्ट की आवश्यकता होगी।

जेएस को अक्षम करने वाले लोग पहले से ही एक अपमानजनक अनुभव की अपेक्षा करते हैं।

स्रोत

2012-11-21 19:05:42

उत्तरदायी सीएसएस छवि एंकर टैग - छवि मानचित्र शैली

उत्तर

संबंधित मुद्दे