it-swarm-id.com

Peta gambar responsif

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

117
jdog

Untuk peta gambar responsif, Anda perlu menggunakan plugin:

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

Atau

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


Tidak ada browser utama yang memahami koordinat persentase dengan benar, dan semuanya 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

81
Tom
39

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

Ada tutorial tentang cara melakukannya.

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

30
belgac

Saya menemukan solusi yang tidak menggunakan peta gambar sama sekali melainkan tag jangkar 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 sebuah situs web yang dapat Anda gunakan untuk membuat 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.

14
Jeffrey Langham

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

Tersedia di sini: https://github.com/davidjbradshaw/imagemap-resizer

11
Grodriguez

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

Anda bisa mendapatkan gambar peta responsif menggunakan tautan di bawah ini

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 = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
    imageMap.resize();
    return;
}
<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>

Bekerja untuk saya (ingat untuk 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/

3
Niente0

Saya menemukan dengan persyaratan yang sama di mana, Saya ingin menunjukkan peta gambar responsif yang dapat mengubah ukuran dengan ukuran layar apa pun 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.

2
Rahul Mahadik

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 adanya kemajuan dalam hal ini dalam beberapa waktu (mungkin sudah lebih dari setahun sejak saya mendengar dukungan akan datang) jadi penyelesaiannya mungkin perlu dilihat jika Anda merasa nyaman dengan JavaScript/ECMAScript.

2
John Urban

Itu tergantung, Anda dapat menggunakan jQuery untuk menyesuaikan rentang secara proporsional menurut saya . Tidak bisakah Anda menggunakan scaling divs atau elemen lain untuk itu?

1
Reinier Kaper

Lihat image-map plugin di Github. Ini berfungsi baik dengan Vanilla JavaScript dan sebagai plugin jQuery.

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

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

Lihat demo .

1
Travis Clarke

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

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

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

1
Johnny Oshika

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

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

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 tertaut 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 pilih background-color dari transparent ketika Anda siap menggunakannya karena Anda ingin area hit Anda tidak terlihat.

0
Tom Bisciglia

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 tingkat ke-3.

0
Pete