Peta gambar responsif

Saya memiliki peta gambar yang ada dalam tata letak html responsif. Skala gambar sesuai dengan ukuran browser, tetapi koordinat gambar jelas-jelas berukuran piksel tetap. Opsi apa yang harus saya ubah ukuran koordinat peta gambar?

Untuk peta gambar yang responsif, Anda perlu menggunakan plugin:

https://github.com/stowball/jQuery-rwdImageMaps (Tidak lagi dipertahankan)

Atau

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

Tidak ada peramban besar yang memahami koordinat persentase dengan benar, dan semua menafsirkan koordinat persentase sebagai koordinat piksel.

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

Dan juga halaman ini untuk menguji apakah browser diimplementasikan

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

Anda juga dapat menggunakan svg alih-alih peta gambar. ;)

Ada tutorial tentang cara melakukan ini.

• Inilah jsfiddle dengan beberapa efek, deskripsi, dan tautan melayang yang bagus: 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>

Responsif Gambar Peta Plugin jQuery oleh Matt Stow

Saya menemukan solusi yang tidak menggunakan peta gambar sama sekali melainkan tag anchor yang benar-benar diposisikan di atas gambar. Satu-satunya kelemahan adalah hotspot harus persegi panjang, tetapi plus adalah bahwa solusi ini tidak bergantung pada Javascript, hanya CSS. Ada situs web yang dapat Anda gunakan untuk menghasilkan kode HTML untuk jangkar: http://www.zaneray.com/responsive-image-map/

Saya meletakkan gambar dan tag anchor yang dihasilkan dalam tag div yang diposisikan relatif dan semuanya bekerja dengan baik pada ukuran jendela dan pada ponsel saya.

Saya menemukan cara no-JS untuk mengatasi ini jika Anda setuju dengan area klik persegi panjang.

Pertama-tama, pastikan gambar Anda berada dalam div yang diposisikan relatif. Kemudian letakkan gambar di dalam div ini, yang berarti akan mengambil semua ruang di div. Terakhir, tambahkan div yang benar-benar diposisikan di bawah gambar, di dalam div utama, dan gunakan persentase untuk bagian atas, kiri, lebar, dan tinggi untuk mendapatkan area klik tautan ukuran dan posisi yang Anda inginkan.

Saya merasa paling mudah untuk memberikan div warna latar belakang hitam (idealnya dengan beberapa alpha fading sehingga Anda dapat melihat konten yang ditautkan di bawah) ketika Anda pertama kali bekerja, dan menggunakan inspektur kode di browser Anda untuk menyesuaikan persentase secara real time , sehingga Anda bisa melakukannya dengan benar.

Inilah garis besar dasar yang bisa Anda kerjakan. Dengan melakukan semuanya dengan persentase, Anda memastikan semua elemen tetap memiliki ukuran dan posisi relatif yang sama dengan skala gambar.

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

Gunakan kode ini dengan inspektur kode Anda di Chrome atau browser pilihan Anda, dan sesuaikan persentasenya (Anda dapat menggunakan persentase desimal menjadi lebih tepat) sampai kotak-kotaknya tepat. Juga memilih background-colordari transparentketika Anda siap untuk menggunakannya karena Anda ingin daerah hit Anda akan terlihat.

David Bradshaw menulis perpustakaan kecil yang bagus yang memecahkan masalah ini. Ini dapat digunakan dengan atau tanpa jQuery.

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

Metode berikut ini berfungsi dengan baik untuk saya, jadi inilah implementasi penuh saya:

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

Bekerja untuk saya (jangan lupa mengubah 3 hal dalam kode):

• PreviousWidth (ukuran gambar asli)

• map_ID (id dari peta gambar Anda)

• img_ID (id dari gambar Anda)

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/

Saya menemukan dengan persyaratan yang sama di mana, saya ingin menunjukkan peta gambar responsif yang dapat mengubah ukuran dengan ukuran layar dan yang penting adalah, saya ingin menyoroti koordinat itu .

Jadi saya mencoba banyak perpustakaan yang dapat mengubah ukuran koordinat sesuai dengan ukuran layar dan acara. Dan saya mendapat solusi terbaik (jquery.imagemapster.min.js) yang berfungsi baik dengan hampir semua browser. Juga saya telah mengintegrasikannya dengan Summer Plgin yang membuat peta gambar.

 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/[email protected]/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>

Semoga bisa membantu seseorang.

http://home.comcast.net/~urbanjost/semaphore.html adalah halaman teratas untuk diskusi, dan sebenarnya memiliki tautan ke solusi berbasis JavaScript untuk masalah tersebut. Saya telah menerima pemberitahuan bahwa HTML akan mendukung persen unit di masa mendatang, tetapi saya belum melihat kemajuan dalam hal ini dalam beberapa waktu (mungkin sudah lebih dari setahun sejak saya mendengar dukungan akan datang) sehingga penyelesaiannya adalah mungkin layak dilihat jika Anda merasa nyaman dengan JavaScript / ECMAScript.

Lihatlah plugin gambar-peta di Github. Ini berfungsi baik dengan JavaScript vanilla dan sebagai plugin jQuery.

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

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

Lihat demo .

Tergantung, Anda dapat menggunakan jQuery untuk menyesuaikan rentang secara proporsional menurut saya. Ngomong-ngomong, mengapa Anda menggunakan peta gambar? Tidak bisakah Anda menggunakan scaling divs atau elemen lain untuk itu?

Bagi mereka yang tidak ingin menggunakan JavaScript, berikut adalah contoh pengiris gambar:

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

Saat Anda mengatur skala jendela, gambar badut akan menskala sesuai, dan ketika itu terjadi, hidung badut tetap hyperlink.

Mirip dengan jawaban Orland di sini: https://stackoverflow.com/a/32870380/462781

Dikombinasikan dengan kode Chris di sini: https://stackoverflow.com/a/12121309/462781

Jika area-area tersebut pas dalam kisi, Anda dapat menindih area dengan gambar transparan menggunakan lebar dalam% yang menjaga rasio aspeknya.

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

Anda dapat menggunakan margin dalam%. Selain itu, gambar "spasi" dapat ditempatkan bersebelahan di dalam div level ke-3.

Untuk beberapa alasan tidak ada solusi ini bekerja untuk saya. Saya sudah sukses menggunakan transformasi.

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

lebar && tinggi responsif

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