उत्तरदायी छवि मानचित्र

Question

मेरे पास एक उत्तरदायी HTML लेआउट में एक मौजूदा छवि मानचित्र है। ब्राउज़र आकार के अनुसार छवियां पैमाने पर हैं, लेकिन छवि निर्देशांक स्पष्ट रूप से निश्चित पिक्सेल आकार हैं। छवि मानचित्र निर्देशांक का आकार बदलने के लिए मेरे पास क्या विकल्प हैं?

Comments

यह प्रश्न किसी भौगोलिक मानचित्र के बारे में नहीं है, बल्कि <मैप> html टैग

— jdog

की जाँच करें छवि नक्शा प्लगइन। यह जावास्क्रिप्ट, नोड, और jQuery के साथ काम करता है

— ट्रैविस क्लार्क

एक विकल्प के रूप में, आप एक एसवीजी छवि का उपयोग कर सकते हैं। मैं एसवीजी को इमेजमैप्स के विकल्प के रूप में

— मोग कहते हैं कि मोनिका को

लगता है कि हम जो चाहते हैं वह जेपीईजी या एक ऐप के समान अपलोड करने की क्षमता है जो आपको छवि पर मानचित्र स्थान निर्दिष्ट करने देता है (जैसे कि छवि-मानचित्र डॉट नेट) - पृष्ठभूमि में, यह एक एसवीजी फ़ाइल पैदा करता है जो अनिवार्य रूप से पारदर्शी है । हम तब चाहते हैं कि मानचित्र एसवीजी पर लागू हो और वेब ब्राउजर में जेपीजी के ऊपर एसवीजी को रेंडर करने के लिए। जैसे ही ब्राउज़र JPG का आकार बदलता है, वैसे ही SVG का भी आकार बदल जाता है और SVG हमेशा इमेज मैप पर क्लिक करते समय ही इनवाइट किया जाता है। इसके किसी भी हिस्से पर कोई सुझाव?

— youcantryreachingme

हाँ, यही मैं 2011 में चाहता था

— jdog

Answer 1

उत्तरदायी छवि मानचित्रों के लिए आपको एक प्लगइन का उपयोग करना होगा:

https://github.com/stowball/jQuery-rwdImageMaps (अब रखरखाव नहीं किया गया)

या

https://github.com/davidjbradshaw/imagemap-resizer

---

कोई भी प्रमुख ब्राउज़र प्रतिशत निर्देशांक को सही तरीके से नहीं समझता है, और सभी प्रतिशत निर्देशांक को पिक्सेल निर्देशांक के रूप में व्याख्या करते हैं।

http://www.howtocreate.co.uk/tutorials/html/imagemaps

और यह भी कि परीक्षण के लिए यह पृष्ठ कि क्या ब्राउज़र लागू होते हैं

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

Comments

क्या यह अभी भी प्रासंगिक है? क्या आप कृपया अपडेट प्रदान कर सकते हैं?

— मलाकी

@ मलाईची हां यह अभी भी प्रासंगिक है

— टॉम

आप टॉम धन्यवाद, हम CodeReview पर एक प्रश्न पर चर्चा कर रहे थे, अब काश मैं सवाल .... याद कर सकता है

— मालाची

@ यह केवल एक छवि के लिए काम करता है..यदि हम एक और छवि रखते हैं, तो दूसरी और तीसरी छवि आदि के लिए काम नहीं कर रहे हैं ... बस इसे जांचें ..

— User2413

मैं एक ऑनलाइन जनरेटर उपकरण पाया है कि का उपयोग करता है SVGs जो सभी प्रमुख ब्राउज़र को समझने imagemapper.noc.io

— frthjf

Answer 2

आप छवि मानचित्र के बजाय svg का भी उपयोग कर सकते हैं। ;)

यह कैसे करना है पर एक ट्यूटोरियल है ।

• यहाँ कुछ अच्छा होवर प्रभाव, विवरण और लिंक के साथ jsfiddle है: http://jsfiddle.net/eLbpmsaj/

.hover_group:hover {
  opacity: 1;
}
#projectsvg {
  position: relative;
  width: 100%;
  padding-bottom: 77%;
  vertical-align: middle;
  margin: 0;
  overflow: hidden;
}
#projectsvg svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

<figure id="projectsvg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" >
<!-- set your background image -->
<image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" />
<g class="hover_group" opacity="0">
  <a xlink:href="https://example.com/link1.html">
    <text x="652" y="706.9" font-size="20">First zone</text>
    <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
  </a>
</g>
<g class="hover_group" opacity="0">
  <a xlink:href="https://example.com/link2.html">
    <text x="1230.7" y="952" font-size="20">Second zone</text>
    <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
  </a>
</g>
  </svg>
</figure>

Comments

ट्यूटोरियल लिंक टूट गया है। Jsfiddle से भी छवि।

— क्रिस्टियानो मैया

मैंने संकेत दिया कि ट्यूटोरियल लिंक टूट गया था और उसने jsfiddle और कोड स्निपेट्स को अपडेट किया। सिर के लिए धन्यवाद

— बेलगाम

यह एक अद्भुत उपाय है। मैंने इसे सफलतापूर्वक उपयोग किया है और एक आकर्षण की तरह काम करता है। धन्यवाद!

— जामे मुसन्स अबाद

2020 में अब तक का सबसे अच्छा समाधान। इस कोड जनरेटर को सुपर सरल बनाने की कोशिश करें। imagemapper.noc.io/#

— ब्रेट डोनाल्ड

यह 2020 में शीर्ष सबसे अच्छा उत्तरदायी समाधान होना चाहिए।

— पौराणिक

Answer 3

मैट स्टो द्वारा उत्तरदायी छवि मानचित्र jQuery प्लगइन

Comments

Eveyrone के लिए बस और FYI करें ... मैंने पाया है कि यह अच्छी तरह से काम करता है, लेकिन एक समझौते के अंदर नहीं। मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं और यदि आप पृष्ठ को छवि पर खुले समझौते के साथ लोड नहीं करते हैं, तो जब आप समझौते को खोलते हैं, तो छवि मानचित्र तब तक नहीं होता है जब तक कि ब्राउज़र विंडो का आकार बदल नहीं जाता है।

— जसोन्फ्लेहर्टी 15

@jasonflaherty क्या आप मानचित्र को दिखाने के लिए बाध्य करने के लिए एक आकार बदलने वाली घटना को ट्रिगर कर सकते हैं? $(window).trigger('resize');

— स्टीव मीस्नर

@SteveMeisner मैंने कोशिश नहीं की है कि ... लेकिन यह एक ताज़ा बल नहीं होगा?

— जासोनफ्लेहर्टी

@ अंजोनफ्लेहर्टी नप! यह सिर्फ आपके द्वारा बाँधने वाले तत्व ( windowइस मामले में) के आकार को "ट्रिगर" करता है । सौभाग्य।

— स्टीव मीस्नर

बस इस प्लगइन का उपयोग करके सुपर बेसिक, लेकिन आसान ड्रुपल मॉड्यूल बनाया गया: drupal.org/project/responsive_imagemaps

— जोशुआ स्टीवर्सन

Answer 4

मैं एक ऐसे समाधान पर भागा, जो छवि मानचित्रों का उपयोग नहीं करता है, बल्कि लंगर टैग जो छवि पर पूरी तरह से तैनात हैं। एकमात्र दोष यह होगा कि हॉटस्पॉट को आयताकार होना होगा, लेकिन प्लस यह है कि यह समाधान जावास्क्रिप्ट, सिर्फ सीएसएस पर निर्भर नहीं करता है। एक वेबसाइट है जो आप एंकरों के लिए एचटीएमएल कोड उत्पन्न करने के लिए उपयोग कर सकते हैं: http://www.zaneray.com/responsive-imax-p/

मैंने अपेक्षाकृत पोस्ट डिव टैग में छवि और उत्पन्न एंकर टैग लगाए और खिड़की के आकार और मेरे मोबाइल फोन पर पूरी तरह से काम किया।

Comments

अच्छा लगा! इस सूची में योगदान देने के लिए धन्यवाद

— jdog

मैं इस naswer को पर्याप्त नहीं बढ़ा सकता हूँ !! एक उत्कृष्ट ट्यूटोरियल; व्यापक और अंडरस्टैंडिंग के लिए आसान। सभी को इसे पढ़ना चाहिए, लेकिन विशेष रुचि के ट्यूटोरियल हैं

— .jenkov.com

यह एक बहुत ही सरल लेकिन अच्छा समाधान है अगर क्लिक-टू-क्लिक किया गया क्षेत्र आयत है।

— user2875289

यह तो कमाल है। मेरे लिए एक DNN साइट के साथ काम किया। जैसा कि जेफरी ने कहा था, मैंने सिर्फ एक रिश्तेदार पद के अंदर <img> और उत्पन्न html को गिरा दिया। धन्यवाद!

— टेड क्रैफ

Answer 5

यदि आप आयताकार हिट क्षेत्रों के साथ ठीक हैं, तो मुझे इसे संबोधित करने के लिए एक नो-जेएस तरीका मिला।

सबसे पहले, सुनिश्चित करें कि आपकी छवि एक div में है जो अपेक्षाकृत तैनात है। फिर छवि को इस div के अंदर रखें, जिसका अर्थ है कि यह div में सभी जगह ले लेगा। अंत में, मुख्य div के भीतर छवि के नीचे पूरी तरह से तैनात div को जोड़ें, और लिंक हिट क्षेत्रों को आपके इच्छित आकार और स्थिति को प्राप्त करने के लिए शीर्ष, बाएं, चौड़ाई और ऊंचाई के लिए प्रतिशत का उपयोग करें।

जब आप पहली बार काम कर रहे हैं, और वास्तविक समय में प्रतिशत को समायोजित करने के लिए अपने ब्राउज़र में एक कोड निरीक्षक का उपयोग करने के लिए (आप कुछ अल्फ़ा लुप्त होने के साथ आदर्श रूप में कुछ काले फीते के साथ आदर्श रूप से डिव को दे सकते हैं तो मुझे यह आसान लगता है) , ताकि आप इसे सही तरीके से प्राप्त कर सकें।

यहां मूल रूपरेखा है जिसके साथ आप काम कर सकते हैं। प्रतिशत के साथ सब कुछ करके, आप यह सुनिश्चित करते हैं कि सभी तत्व एक ही सापेक्ष आकार और स्थिति में बने रहें जैसे कि छवि तराजू।

<div style="position: relative;">
  <img src="background-image.png" style="width: 100%; height: auto;">
  <a href="/link1"><div style="position: absolute; left: 15%; top: 20%; width: 12%; height: 8%; background-color: rgba(0, 0, 0, .25);"></div></a>
  <a href="/link2"><div style="position: absolute; left: 52%; top: 38%; width: 14%; height: 20%; background-color: rgba(0, 0, 0, .25);"></div></a>
</div>

Chrome या अपने पसंद के ब्राउज़र में अपने कोड निरीक्षक के साथ इस कोड का उपयोग करें, और तब तक समायोजन करें (जब आप बॉक्स सही हों, तब तक दशमलव का उपयोग अधिक सटीक कर सकते हैं)। यह भी चुनें background-colorकि transparentजब आप इसका उपयोग करने के लिए तैयार हों , जब आप चाहते हैं कि आपके हिट क्षेत्र अदृश्य हों।

Comments

यह एक महान उपाय है! धन्यवाद

— xims

अच्छा समाधान! UIkit अपने मार्करों के लिए एक ही तकनीक का उपयोग करता है: getuikit.com/docs/marker

— xela84

शानदार समाधान, साझा करने के लिए धन्यवाद! मैं एक मोबाइल ऐप में इसका उपयोग कर रहा हूं और यह विभिन्न स्क्रीन के मुद्दे को हल करता है।

— जॉन्जिस

Answer 6

डेविड ब्रैडशॉ ने एक अच्छी छोटी लाइब्रेरी लिखी जो इस समस्या को हल करती है। इसे jQuery के साथ या बिना उपयोग किया जा सकता है।

यहाँ उपलब्ध है: https://github.com/davidjbradshaw/imagemap-resizer

Comments

इस टिप्पणी के अनुसार Chrome / IE / FF के नवीनतम संस्करणों में काम करने की पुष्टि की गई।

— जेम्स पैटरसन

मेरे लिए बहुत अच्छा काम किया, सुपर सरल इंटरफ़ेस भी

— ब्रायन

Answer 7

निम्नलिखित विधि मेरे लिए पूरी तरह से काम करती है, इसलिए यहां मेरा पूर्ण कार्यान्वयन है:

<img id="my_image" style="display: none;" src="my.png" width="924" height="330" border="0" usemap="#map" />

<map name="map" id="map">
    <area shape="poly" coords="774,49,810,21,922,130,920,222,894,212,885,156,874,146" href="#mylink" />
    <area shape="poly" coords="649,20,791,157,805,160,809,217,851,214,847,135,709,1,666,3" href="#myotherlink" />
</map>

<script>
$(function(){
    var image_is_loaded = false;
    $("#my_image").on('load',function() {
        $(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
        $($(this).attr('usemap')+" area").each(function(){
            $(this).data('coords', $(this).attr('coords'));
        });

        $(this).css('width', '100%').css('height','auto').show();

        image_is_loaded = true;
        $(window).trigger('resize');
    });


    function ratioCoords (coords, ratio) {
        coord_arr = coords.split(",");

        for(i=0; i < coord_arr.length; i++) {
            coord_arr[i] = Math.round(ratio * coord_arr[i]);
        }

        return coord_arr.join(',');
    }
    $(window).on('resize', function(){
        if (image_is_loaded) {
            var img = $("#my_image");
            var ratio = img.width()/img.data('width');

            $(img.attr('usemap')+" area").each(function(){
                console.log('1: '+$(this).attr('coords'));
                $(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
            });
        }
    });
});
</script>

Answer 8

मेरे लिए काम करना (कोड में 3 चीजें बदलना याद रखें):

• पिछला (छवि का मूल आकार)

• map_ID (आपकी छवि मानचित्र की आईडी)

• img_ID (आपकी छवि की आईडी)

HTML:

<div style="width:100%;">
    <img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" />
<area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" />
<area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" />
</map>

जावास्क्रिप्ट:

window.onload = function () {
    var ImageMap = function (map, img) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 128;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = img.offsetWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
    imageMap.resize();
    return;
}

JSFiddle: http://jsfiddle.net/p7EyT/154/

Answer 9

मैं उसी आवश्यकता के साथ आता हूं जहां, मैं उत्तरदायी छवि मानचित्र दिखाना चाहता हूं जो किसी भी स्क्रीन आकार और महत्वपूर्ण चीज के साथ आकार बदल सकता है, मैं उस निर्देशांक को उजागर करना चाहता हूं ।

इसलिए मैंने कई पुस्तकालयों की कोशिश की जो स्क्रीन आकार और घटना के अनुसार निर्देशांक का आकार बदल सकते हैं। और मुझे सबसे अच्छा समाधान मिला (jquery.imagemapster.min.js) जो लगभग सभी ब्राउज़रों के साथ ठीक काम करता है। इसके अलावा, मैंने इसे समर प्लिन के साथ एकीकृत किया है जो छवि मानचित्र बनाता है।

 var resizeTime = 100;
 var resizeDelay = 100;    

$('img').mapster({
        areas: [
            {
                key: 'tbl',
                fillColor: 'ff0000',
                staticState: true,
                stroke: true
            }
        ],
        mapKey: 'state'
    });

    // Resize the map to fit within the boundaries provided

    function resize(maxWidth, maxHeight) {
        var image = $('img'),
            imgWidth = image.width(),
            imgHeight = image.height(),
            newWidth = 0,
            newHeight = 0;

        if (imgWidth / maxWidth > imgHeight / maxHeight) {
            newWidth = maxWidth;
        } else {
            newHeight = maxHeight;
        }
        image.mapster('resize', newWidth, newHeight, resizeTime);
    }

    function onWindowResize() {

        var curWidth = $(window).width(),
            curHeight = $(window).height(),
            checking = false;
        if (checking) {
            return;
        }
        checking = true;
        window.setTimeout(function () {
            var newWidth = $(window).width(),
                newHeight = $(window).height();
            if (newWidth === curWidth &&
                newHeight === curHeight) {
                resize(newWidth, newHeight);
            }
            checking = false;
        }, resizeDelay);
    }

    $(window).bind('resize', onWindowResize);

img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-imagemapster@1.2.10/dist/jquery.imagemapster.min.js"></script>

<img src="https://discover.luxury/wp-content/uploads/2016/11/Cities-With-the-Most-Michelin-Star-Restaurants-1024x581.jpg" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="777, 219, 707, 309, 750, 395, 847, 431, 916, 378, 923, 295, 870, 220" href="#" alt="poly" title="Polygon" data-maphilight='' state="tbl"/>
    <area shape="circle" coords="548, 317, 72" href="#" alt="circle" title="Circle" data-maphilight='' state="tbl"/>
    <area shape="rect" coords="182, 283, 398, 385" href="#" alt="rect" title="Rectangle" data-maphilight='' state="tbl"/>
</map>

आशा है कि यह किसी की मदद करें।

Answer 10

http://home.comcast.net/~urbanjost/semaphore.html चर्चा का शीर्ष पृष्ठ है, और वास्तव में समस्या के लिए जावास्क्रिप्ट-आधारित समाधान के लिंक हैं। मुझे एक सूचना मिली है कि HTML भविष्य में प्रतिशत इकाइयों का समर्थन करेगा लेकिन मैंने इस पर काफी समय में कोई प्रगति नहीं देखी है (यह एक साल से अधिक हो गया है जब से मैंने सुना है कि समर्थन आगे होगा) इसलिए काम के आसपास शायद यह देखने लायक है कि क्या आप जावास्क्रिप्ट / ईसीएमएस्क्रिप्ट के साथ सहज हैं।

Answer 11

की जाँच करें छवि नक्शा प्लगइन Github पर। यह वेनिला जावास्क्रिप्ट और एक jQuery प्लगइन के रूप में दोनों के साथ काम करता है।

$('img[usemap]').imageMap();     // jQuery

ImageMap('img[usemap]')          // JavaScript

की जाँच करें डेमो ।

Answer 12

यह निर्भर करता है, आप मेरे विचार से आनुपातिक श्रेणियों को समायोजित करने के लिए jQuery का उपयोग कर सकते हैं। आप एक छवि मानचित्र का उपयोग क्यों करते हैं? क्या आप इसके लिए स्केलिंग डिव या अन्य तत्वों का उपयोग नहीं कर सकते हैं?

Comments

जबकि सटीक समाधान स्केल किए गए divs के साथ काम करेगा, छवि मानचित्र "सामग्री प्रबंधित" है और किसी भी प्रकार के क्षेत्र के लिए अनुमति देता है। धन्यवाद, मैं इसके लिए jquery की जाँच करूँगा।

— jdog

Answer 13

उन लोगों के लिए जो जावास्क्रिप्ट का सहारा नहीं लेना चाहते हैं, यहां एक छवि टुकड़ा करने की क्रिया उदाहरण है:

http://codepen.io/anon/pen/cbzrK

जैसे ही आप विंडो को स्केल करते हैं, क्लॉज की इमेज उसके अनुसार स्केल हो जाएगी, और जब यह होता है, तो क्लॉज की नाक हाइपरलिंक हो जाती है।

Comments

बुरे सपने के लिए धन्यवाद!

— जेरगिरिसुह

छवि लिंक सभी टूटे हुए हैं।

— टायलर फोर्सिथे

Answer 14

ऑरलैंड के उत्तर के समान यहां: https://stackoverflow.com/a/32870380/462781

यहाँ क्रिस कोड के साथ संयुक्त: https://stackoverflow.com/a/12121309/462781

यदि क्षेत्र एक ग्रिड में फिट होते हैं, तो आप क्षेत्रों में पारदर्शी चित्रों द्वारा उन क्षेत्रों को ओवरले कर सकते हैं जो उनके पहलू अनुपात को बनाए रखते हैं।

    .wrapperspace {
      width: 100%;
      display: inline-block;
      position: relative;
    }
    .mainspace {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

<div class="wrapperspace">
 <img style="float: left;" title="" src="background-image.png" width="100%" />
 <div class="mainspace">
     <div>
         <img src="space-top.png" style="margin-left:6%;width:15%;"/>
     </div>
     <div>
       <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:15%;"></a>
     </div>
  <div>
   <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:10%;"></a>
   <a href="http://www.example.com"><img src="space-company.png" style="width:20%;"></a>
  </div>
 </div>
</div>

आप% में एक मार्जिन का उपयोग कर सकते हैं। इसके अलावा "अंतरिक्ष" छवियों को एक 3 स्तर के अंदर एक दूसरे के बगल में रखा जा सकता है।

Answer 15

किसी कारण से इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया। मुझे परिवर्तनों का उपयोग करके सबसे अच्छी सफलता मिली है।

transform: translateX(-5.8%) translateY(-5%) scale(0.884);

Answer 16

उत्तरदायी चौड़ाई और ऊंचाई

window.onload = function () {
        var ImageMap = function (map, img) {
                var n,
                    areas = map.getElementsByTagName('area'),
                    len = areas.length,
                    coords = [],
                    imgWidth = img.naturalWidth,
                    imgHeight = img.naturalHeight;
                for (n = 0; n < len; n++) {
                    coords[n] = areas[n].coords.split(',');
                }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / imgWidth,
                    y = img.offsetHeight / imgHeight;
                    imgWidth = img.offsetWidth;
                    imgHeight = img.offsetHeight;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m +=2) {
                        coords[n][m] *= x;
                        coords[n][m+1] *= y;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                    return true;
                };
                window.onresize = this.resize;
            },
        imageMap = new ImageMap(document.getElementById('map_region'), document.getElementById('prepay_region'));
        imageMap.resize();
        return;
    }

Comments

क्या आप 2015 से अपने कोड और Niente0 के उत्तर के बीच अंतर दिखाते हुए कुछ और सामग्री जोड़ सकते हैं ?

— माइकल - व्हेयर क्ले शिर्किन