แผนที่รูปภาพที่ตอบสนอง

ฉันมีแผนที่รูปภาพที่มีอยู่ในเค้าโครง HTML ที่ตอบสนองได้ดี ปรับขนาดภาพตามขนาดเบราว์เซอร์ แต่พิกัดภาพเป็นขนาดพิกเซลคงที่แน่นอน ตัวเลือกใดที่ฉันต้องปรับขนาดพิกัดแผนที่รูปภาพ

สำหรับแผนที่รูปภาพที่ตอบสนองคุณจะต้องใช้ปลั๊กอิน:

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

คุณสามารถใช้ 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>

Maps รูปภาพที่ตอบสนองต่อปลั๊กอิน jQueryโดย Matt Stow

ฉันวิ่งข้ามโซลูชันที่ไม่ได้ใช้แผนที่รูปภาพเลย แต่เป็นการยึดแท็กที่อยู่เหนือรูปภาพ ข้อเสียเปรียบเพียงอย่างเดียวคือฮอตสปอตจะต้องเป็นรูปสี่เหลี่ยม แต่ข้อดีคือโซลูชันนี้ไม่ได้พึ่งพาจาวาสคริปต์เพียง CSS มีเว็บไซต์ที่คุณสามารถใช้เพื่อสร้างรหัส HTML สำหรับแองเคอร์ได้: http://www.zaneray.com/responsive-image-map/

ฉันใส่รูปภาพและแท็กจุดยึดที่สร้างขึ้นในแท็ก div ที่ค่อนข้างอยู่ในตำแหน่งและทุกอย่างทำงานได้อย่างสมบูรณ์บนหน้าต่างปรับขนาดและบนโทรศัพท์มือถือของฉัน

ฉันพบวิธีที่ไม่มี JS เพื่อแก้ไขปัญหานี้หากคุณโอเคกับพื้นที่ที่ถูกตีเป็นรูปสี่เหลี่ยมผืนผ้า

ก่อนอื่นตรวจสอบให้แน่ใจว่าภาพของคุณอยู่ใน div ที่ค่อนข้างอยู่ในตำแหน่ง จากนั้นวางภาพไว้ใน 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เมื่อคุณพร้อมที่จะใช้มันตั้งแต่คุณต้องการพื้นที่ตีของคุณจะมองไม่เห็น

David Bradshaw เขียนห้องสมุดเล็ก ๆ ที่ช่วยแก้ปัญหานี้ มันสามารถใช้งานได้โดยมีหรือไม่มี jQuery

มีให้ที่นี่: https://github.com/davidjbradshaw/imagemap-resizer

วิธีการต่อไปนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันดังนั้นนี่คือการใช้งานอย่างเต็มรูปแบบของฉัน:

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

ใช้งานได้สำหรับฉัน (อย่าลืมเปลี่ยน 3 สิ่งในรหัส):

• ก่อนหน้ากว้าง (ขนาดภาพดั้งเดิม)

• map_ID (รหัสแผนที่ภาพของคุณ)

• img_ID (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>

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

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

ฉันเจอกับข้อกำหนดเดียวกันที่ฉันต้องการแสดงแผนที่รูปภาพที่ตอบสนองซึ่งสามารถปรับขนาดด้วยขนาดหน้าจอและสิ่งสำคัญคือฉันต้องการเน้นที่พิกัดนั้น

ดังนั้นฉันจึงลองห้องสมุดหลายแห่งที่สามารถปรับขนาดพิกัดตามขนาดหน้าจอและกิจกรรม และฉันได้ทางออกที่ดีที่สุด (jquery.imagemapster.min.js) ซึ่งทำงานได้ดีกับเบราว์เซอร์เกือบทั้งหมด นอกจากนี้ฉันได้รวมเข้ากับSummer Plginซึ่งสร้างแผนที่รูปภาพ

 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>

หวังว่าจะช่วยให้ใครบางคน

http://home.comcast.net/~urbanjost/semaphore.htmlเป็นหน้าแรกของการสนทนาและมีลิงก์ไปยังโซลูชันที่ใช้ JavaScript เพื่อแก้ไขปัญหา ฉันได้รับการแจ้งเตือนว่า HTML จะรองรับหน่วยเปอร์เซ็นต์ในอนาคต แต่ฉันไม่ได้เห็นความคืบหน้าใด ๆ ในเวลานี้ (อาจจะนานกว่าหนึ่งปีเพราะฉันได้ยินมาว่าการสนับสนุนกำลังจะมาถึง) ดังนั้นการแก้ไข อาจคุ้มค่าที่จะดูว่าคุณพอใจกับ JavaScript / ECMAScript หรือไม่

ลองใช้ปลั๊กอินภาพแผนที่บน Github มันทำงานได้ทั้งกับวานิลลา JavaScript และเป็นปลั๊กอิน jQuery

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

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

ตรวจสอบการสาธิต

ขึ้นอยู่กับว่าคุณสามารถใช้ jQuery เพื่อปรับช่วงตามสัดส่วนที่ฉันคิด ทำไมคุณถึงใช้แผนที่รูปภาพด้วย? คุณไม่สามารถใช้การปรับขนาด div หรือองค์ประกอบอื่น ๆ ได้หรือไม่

สำหรับผู้ที่ไม่ต้องการใช้ JavaScript ต่อไปนี้เป็นตัวอย่างการแบ่งภาพ:

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

ในขณะที่คุณปรับขนาดหน้าต่างรูปภาพของตัวตลกจะขยายตามและเมื่อเป็นเช่นนั้นจมูกของตัวตลกจะยังคงเชื่อมโยงหลายมิติ

คล้ายกับคำตอบของ Orland ที่นี่: https://stackoverflow.com/a/32870380/462781

รวมกับรหัสของ Chris ที่นี่: 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>

คุณสามารถใช้มาร์จิ้นเป็น% นอกจากนี้ยังสามารถวางรูปภาพ "space" ไว้ติดกันภายใน div ระดับ 3

ด้วยเหตุผลบางอย่างการแก้ปัญหาเหล่านี้ไม่ได้ผลสำหรับฉัน ฉันประสบความสำเร็จมากที่สุดในการใช้การแปลงร่าง

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

ความกว้างที่ตอบสนอง & & ความสูง

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