প্রতিক্রিয়াশীল চিত্র মানচিত্র

Question

একটি প্রতিক্রিয়াশীল এইচটিএমএল লেআউটে আমার বিদ্যমান চিত্রের মানচিত্র রয়েছে। চিত্রগুলি ব্রাউজারের আকার অনুযায়ী স্কেল করে তবে চিত্রের স্থানাঙ্কগুলি অবশ্যই পিক্সেল আকারের স্থির হয়। চিত্র মানচিত্রের স্থানাঙ্কগুলিকে পুনরায় আকার দেওয়ার জন্য আমার কাছে কী বিকল্প রয়েছে?

Comments

এই প্রশ্নটি কোনও ভৌগলিক মানচিত্র সম্পর্কে নয় তবে <map> এইচটিএমএল ট্যাগ

— jdog

পরীক্ষা করে দেখুন ইমেজ মানচিত্রে প্লাগইন। এটি জাভাস্ক্রিপ্ট, নোড এবং jQuery এর সাথে কাজ করে

— ট্র্যাভিস ক্লার্ক

বিকল্প হিসাবে, আপনি একটি এসভিজি চিত্র ব্যবহার করতে পারেন। আমি চিত্রকল্পের বিকল্প হিসাবে এসভিজি ব্যবহার করে

— মওগ মনিকা 22

আমরা যা চাই তা শোনানো হ'ল একটি জেপিইজি আপলোড করার ক্ষমতা বা কোনও অ্যাপ্লিকেশানের অনুরূপ যা আপনাকে চিত্রের মানচিত্রের অবস্থানগুলি নির্দিষ্ট করতে দেয় (যেমন চিত্র-মানচিত্র ডট নেট এ) - ব্যাকগ্রাউন্ডে এটি একটি এসভিজি ফাইল তৈরি করে যা মূলত স্বচ্ছ । তারপরে আমরা মানচিত্রটি এসভিজিতে প্রয়োগ করতে এবং ওয়েব ব্রাউজারে জেপিজির উপরে এসভিজি রেন্ডার করতে চাই। ব্রাউজারটি জেপিজিকে আকার পরিবর্তন করার সাথে সাথে, এসভিজিকেও আকার পরিবর্তন করা হয় এবং চিত্রের মানচিত্রে ক্লিক করার সময় এসভিজি সর্বদা এক হয়ে থাকে। এর কোন অংশ সম্পর্কে কোন পরামর্শ?

— youcantryreachingme

হ্যাঁ যা আমি ২০১১

— তে

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

এর কোনটি কি এখনও প্রাসঙ্গিক? আপনি একটি আপডেট প্রদান করতে পারেন দয়া করে?

— মালাচি

@ মালাচি হ্যাঁ এটি এখনও প্রাসঙ্গিক

— টম

আপনাকে ধন্যবাদ টম, আমরা কোডরিউ নিয়ে একটি প্রশ্নে আলোচনা করছিলাম, এখন আমি আশা করি আমি প্রশ্নটি মনে করতে পারি ....

— মালাচি

@ টম এটি কেবল একটি চিত্রের জন্যই কাজ করে..আমি যদি অন্য ছবিটি রাখি তবে এটি দ্বিতীয় এবং তৃতীয় চিত্র ইত্যাদির জন্য কাজ করছে না ... কেবল এটি পরীক্ষা করে দেখুন ..

— ইউজার 2413

আমি একটি অনলাইন জেনারেটর টুল পেয়েছি ব্যবহারসমূহ SVGs যা সমস্ত প্রধান ব্রাউজার বুঝতে imagemapper.noc.io

— frthjf

Answer 2

আপনি কোনও চিত্রের মানচিত্রের পরিবর্তে এসভিজিও ব্যবহার করতে পারেন। ;)

এটি কীভাবে করবেন সে সম্পর্কে একটি টিউটোরিয়াল রয়েছে ।

• এখানে কিছু সুন্দর হোভার ইফেক্ট, বর্ণনা এবং লিঙ্কগুলি সহ জেফফিল: 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 থেকে চিত্র।

— ক্রিশ্চিয়ানো মিয়া

আমি টিউটোরিয়াল লিঙ্কটি ভেঙে জেসফিডাল এবং কোড স্নিপেটগুলি আপডেট করে সিগন্যাল করেছি। মাথা আপ করার জন্য আপনাকে ধন্যবাদ

— বেলগ্যাক

এটি একটি আশ্চর্যজনক সমাধান। আমি এটি সফলভাবে ব্যবহার করেছি এবং কবজির মতো কাজ করি। ধন্যবাদ!

— জাউমে মুসনসাবাদের আবাদ

2020-এ এখন পর্যন্ত সেরা সমাধান। imagemapper.noc.io/#

— ব্রেট ডোনাল্ড

এটি 2020-এ সেরা সেরা প্রতিক্রিয়াশীল সমাধান হতে হবে

— পৌরাণিক

Answer 3

ম্যাট স্টো দ্বারা প্রতিক্রিয়াশীল চিত্র মানচিত্রের jQuery প্লাগইন

Comments

ইভেরিওনের জন্য কেবল এবং এফওয়াইআই ... আমি দেখতে পেয়েছি এটি ভালভাবে কাজ করে তবে কোনও চুক্তির অভ্যন্তরে নয়। আমি বুটস্ট্র্যাপ 3 ব্যবহার করছি এবং আপনি যদি চিত্রটিতে অ্যাকর্ডিয়ন খোলার সাথে পৃষ্ঠাটি লোড না করেন, আপনি যখন অ্যাকর্ডিয়নটি খোলেন, ব্রাউজার উইন্ডোটিকে পুনরায় আকার না দেওয়া পর্যন্ত চিত্রের মানচিত্রটি সেখানে নেই।

— জেসনফ্লেহার্টি

@ জেসনফ্লেহার্টি আপনি কি মানচিত্রটি প্রদর্শন করতে বাধ্য করতে পুনরায় আকারের ইভেন্টটি ট্রিগার করতে পারেন? $(window).trigger('resize');

— স্টিভ মেইজনার

@ স্টিভমিজনার আমি চেষ্টা করে দেখিনি ... তবে কি তা রিফ্রেশ করতে বাধ্য করবে?

— জেসনফ্লেহার্টি

পুনঃটুইট করেছেন এটি কেবল যে উপাদানটি আপনি বেঁধে রাখছেন সেটির আকার পুনরায় আকারের ইভেন্টটিকে "ট্রিগার" করে ( windowএই ক্ষেত্রে)। শুভকামনা।

— স্টিভ মেইজনার

এই প্লাগইনটি ব্যবহার করে স্রেফ বেসিক, তবে হ্যান্ডি ড্রুপাল মডিউলটি তৈরি করেছে: drupal.org/project/responsive_imagemaps

— জোশুয়া স্টিওয়ার্ডসন

Answer 4

আমি এমন একটি সমাধান জুড়ে দৌড়ালাম যা চিত্রের মানচিত্রগুলিতে মোটেও ব্যবহার করে না বরং অ্যাঙ্কর ট্যাগগুলি পুরোপুরি চিত্রের উপরে অবস্থান করছে। একমাত্র ত্রুটি হটস্পটটি আয়তক্ষেত্রাকার হতে হবে, তবে প্লাসটি হ'ল এই সমাধানটি জাভাস্ক্রিপ্ট, কেবল সিএসএসের উপর নির্ভর করে না। একটি ওয়েবসাইট রয়েছে যা আপনি অ্যাঙ্গরগুলির জন্য এইচটিএমএল কোড উত্পন্ন করতে ব্যবহার করতে পারেন: http://www.zaneray.com/responsive-image-map/

আমি ইমেজ এবং উত্পন্ন অ্যাঙ্কর ট্যাগগুলিকে তুলনামূলকভাবে অবস্থানযুক্ত ডিভি ট্যাগে রেখেছি এবং উইন্ডো রিসাইজে এবং আমার মোবাইল ফোনে সবকিছু পুরোপুরি কাজ করেছে।

Comments

ভাল লাগছে! এই তালিকাতে অবদান রাখার জন্য ধন্যবাদ

— jdog

আমি এই ন্যাসওয়ারকে পর্যাপ্ত পরিমাণে উত্সাহ দিতে পারি না !! একটি দুর্দান্ত টিউটোরিয়াল; আন্ডারস্যান্ডে বিস্তৃত এবং সহজ। এটি সবারই পড়া উচিত, তবে বিশেষ আগ্রহের বিষয়টি টিউটোরিয়াল.

— jenkov.com/svg/scriptting.html

ক্লিক-করা অঞ্চলটি আয়তক্ষেত্র হয় এটি এটি একটি খুব সহজ তবে দুর্দান্ত সমাধান।

— ব্যবহারকারী 2875289

এটি এত দুর্দান্ত। আমার জন্য পাশাপাশি একটি ডিএনএন সাইট নিয়ে কাজ করেছেন। জেফ্রি যেমন বলেছিলেন, আমি কেবলমাত্র একটি আপেক্ষিক অবস্থানের ডিভের মধ্যে <img> এবং উত্পন্ন এইচটিএমএল ফেলেছি। ধন্যবাদ!

— টেড ক্রাপফ

Answer 5

আপনি আয়তক্ষেত্রাকার হিট অঞ্চলগুলির সাথে যদি ঠিক থাকেন তবে আমি এটির সমাধান করার জন্য একটি নো-জেএস উপায় পেয়েছি।

প্রথমত, আপনার চিত্রটি তুলনামূলকভাবে অবস্থিত এমন একটি ডিভের মধ্যে রয়েছে তা নিশ্চিত করুন। তারপরে চিত্রটি এই ডিভের ভিতরে রাখুন, যার অর্থ এটি ডিভের সমস্ত স্থান গ্রহণ করবে। পরিশেষে, মূল ডিভের মধ্যে, চিত্রের নীচে একেবারে অবস্থানযুক্ত ডিভের যোগ করুন এবং লিঙ্কটি হিট অঞ্চলগুলি আপনার পছন্দ মতো আকার এবং অবস্থান পাওয়ার জন্য উপরে, বাম, প্রস্থ এবং উচ্চতার জন্য শতাংশ ব্যবহার করুন।

আপনি প্রথম কাজ করার সময় ডিআইভিটিকে একটি কালো পটভূমির রঙ দেওয়া (আদর্শভাবে কিছু আলফা বিবর্ণের সাথে সংযোগিত সামগ্রীগুলি দেখতে পাবেন) দেওয়া সবচেয়ে সহজ এবং আপনি আপনার ব্রাউজারে একটি কোড পরিদর্শককে রিয়েল টাইমে শতাংশগুলি সামঞ্জস্য করতে ব্যবহার করা সবচেয়ে সহজ বলে মনে করেন , যাতে আপনি এটি ঠিক পেতে পারেন।

আপনার সাথে কাজ করতে পারেন এমন বেসিক রূপরেখাটি এখানে। শতাংশের সাথে সবকিছু করে, আপনি উপাদানগুলি নিশ্চিত করেন যে সমস্ত চিত্রের স্কেলের মতো সমান আপেক্ষিক আকার এবং অবস্থান বজায় রাখে।

<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

চমৎকার সমাধান! ইউআইকিট তাদের চিহ্নিতকারীদের জন্য একই কৌশলটি ব্যবহার করে: getuikit.com/docs/marker

— xela84

উজ্জ্বল সমাধান, ভাগ করে নেওয়ার জন্য ধন্যবাদ! আমি এটি একটি মোবাইল অ্যাপ্লিকেশনটিতে ব্যবহার করছি এবং এটি বিভিন্ন স্ক্রিনের সমস্যা সমাধান করে।

— জনজিআইএস

Answer 6

ডেভিড ব্র্যাডশাহ একটি দুর্দান্ত ছোট লাইব্রেরি লিখেছেন যা এই সমস্যার সমাধান করে। এটি jQuery এর সাথে বা ছাড়াই ব্যবহার করা যেতে পারে।

এখানে উপলভ্য: https://github.com/davidjbradshaw/imagemap-resizer

Comments

এই মন্তব্য হিসাবে ক্রোম / আইই / এফএফ এর সর্বশেষ সংস্করণে কাজ করার জন্য নিশ্চিত।

— জেমস পিটারসন

আমার জন্য দুর্দান্ত কাজ করেছে, অতি সাধারণ ইন্টারফেসও

— ব্রায়ান

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 টি জিনিস পরিবর্তন করতে ভুলবেন না):

• পূর্ববর্তী প্রস্থ (চিত্রের মূল আকার)

• মানচিত্র_আইডি (আপনার চিত্র মানচিত্রের আইডি)

• img_ID (আপনার চিত্রের আইডি)

এইচটিএমএল:

<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>

javascript:

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;
}

জেএসফিডাল: 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 আলোচনার শীর্ষ পৃষ্ঠা এবং সমস্যাটির জাভাস্ক্রিপ্ট-ভিত্তিক সমাধানের লিঙ্কগুলি রয়েছে। আমি একটি বিজ্ঞপ্তি পেয়েছি যে এইচটিএমএল ভবিষ্যতে শতাংশ ইউনিটকে সমর্থন করবে তবে আমি বেশ কিছু সময়ের মধ্যে এ নিয়ে কোনও অগ্রগতি দেখিনি (সম্ভবত এক বছর পেরিয়ে গেছে যে শুনেছি সমর্থনটি আসন্ন আসবে) কাজটি প্রায় আপনি জাভাস্ক্রিপ্ট / ECMAScript সাথে আরামদায়ক কিনা তা সম্ভবত দেখার মতো probably

Answer 11

গিথুব - এ চিত্র-মানচিত্রের প্লাগইনটি দেখুন। এটি ভ্যানিলা জাভাস্ক্রিপ্ট এবং jQuery প্লাগইন হিসাবে উভয়ই কাজ করে।

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

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

পরীক্ষা করে দেখুন ডেমো ।

Answer 12

এটি নির্ভর করে, আপনি আনুপাতিকভাবে আমার ধারণা পরিসীমাটি সামঞ্জস্য করতে jQuery ব্যবহার করতে পারেন। আপনি কেন কোনও চিত্রের মানচিত্র ব্যবহার করবেন? আপনি কি এর জন্য স্কেলিং ডিভিস বা অন্যান্য উপাদান ব্যবহার করতে পারবেন না?

Comments

সঠিক সমাধানটি স্কেলড ডিভগুলি নিয়ে কাজ করার সময়, চিত্রের মানচিত্রটি "বিষয়বস্তু পরিচালিত" এবং কোনও প্রকারের অঞ্চলে মঞ্জুরি দেয়। ধন্যবাদ, আমি এই জন্য jquery চেক আউট করব।

— jdog

Answer 13

যারা জাভাস্ক্রিপ্ট অবলম্বন করতে চান না তাদের জন্য এখানে একটি চিত্রের টুকরো উদাহরণ রয়েছে:

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

আপনি উইন্ডোটি স্কেল করার সাথে সাথে ক্লাউন চিত্রটি স্কেল করবে এবং এটি হয়ে গেলে ক্লাউনটির নাক হাইপারলিংকড থাকবে।

Comments

দুঃস্বপ্নের জন্য ধন্যবাদ!

— jerrygarciuh

চিত্রের লিঙ্কগুলি সমস্ত নষ্ট হয়ে গেছে।

— টাইলার ফোরসিথে 21

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>

আপনি% তে মার্জিন ব্যবহার করতে পারেন। অতিরিক্তভাবে "স্পেস" চিত্রগুলি তৃতীয় স্তরের ডিভের মধ্যে একে অপরের পাশে স্থাপন করা যেতে পারে।

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 থেকে আপনার কোড এবং নিয়ান্তে 0 এর উত্তরের মধ্যে পার্থক্য দেখিয়ে আরও কিছু সামগ্রী যুক্ত করতে পারেন ?

— মাইকেল - ক্লে শিরকি