Duyarlı resim haritası

Duyarlı bir html düzeninde mevcut bir görüntü eşlem var. Görüntüler tarayıcı boyutuna göre ölçeklenir, ancak görüntü koordinatları açıkça sabit piksel boyutlarındadır. Görüntü haritası koordinatlarını yeniden boyutlandırmak için hangi seçeneklere ihtiyacım var?

Duyarlı görüntü haritaları için bir eklenti kullanmanız gerekir:

https://github.com/stowball/jQuery-rwdImageMaps (Artık bakım yapılmıyor)

Veya

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

Hiçbir büyük tarayıcı yüzde koordinatlarını doğru olarak anlamaz ve yüzde koordinatlarını piksel koordinatları olarak yorumlamaz.

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

Ayrıca, tarayıcıların uygulanıp uygulanmadığını test etmek için bu sayfa

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

Görüntü eşlemesi yerine svg'yi de kullanabilirsiniz. ;)

Bunun nasıl yapılacağı konusunda bir eğitim vardır .

• İşte bazı hover efektleri, açıklama ve bağlantılar ile 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>

Duyarlı Görüntü Haritaları Matt Stow tarafından jQuery Eklentisi

Hiç görüntü haritaları kullanmayan bir çözümle karşılaştım, daha ziyade görüntünün üzerine yerleştirilmiş bağlantı etiketleriyle karşılaştım. Tek dezavantajı, sıcak noktanın dikdörtgen olması gerektiğidir, ancak artı, bu çözümün Javascript'e, sadece CSS'ye dayanmamasıdır. Bağlantılar için HTML kodu oluşturmak üzere kullanabileceğiniz bir web sitesi vardır: http://www.zaneray.com/responsive-image-map/

Görüntüyü ve oluşturulan bağlantı etiketlerini nispeten konumlandırılmış bir div etiketine koydum ve her şey pencere yeniden boyutlandırma ve cep telefonumda mükemmel çalıştı.

Dikdörtgen isabet alanlarıyla iyi iseniz, bunu çözmek için bir JS olmayan yol buldum.

Her şeyden önce, resminizin nispeten konumlandırılmış bir div içinde olduğundan emin olun. Sonra görüntüyü bu div içine koyun, yani div içindeki tüm alanı kaplayacaktır. Son olarak, ana div içinde görüntünün altına kesinlikle konumlandırılmış div'lar ekleyin ve bağlantı hit alanlarını istediğiniz boyut ve konuma getirmek için üst, sol, genişlik ve yükseklik için yüzdeleri kullanın.

İlk çalışırken siyah bir arka plan rengi (ideal olarak bazı alfa solmasıyla, altındaki bağlantılı içeriği görebilmeniz için) vermek ve yüzdeleri gerçek zamanlı olarak ayarlamak için tarayıcınızda bir kod denetçisi kullanmak en kolay yolu buluyorum , böylece doğru şekilde elde edebilirsiniz.

İşte çalışabileceğiniz temel anahat. Yüzdeleri olan her şeyi yaparak, öğelerin tümünün görüntü ölçekleriyle aynı göreceli boyut ve konumda kalmasını sağlarsınız.

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

Bu kodu Chrome'daki kod denetçinizle veya seçtiğiniz tarayıcınızla kullanın ve kutular doğru olana kadar yüzdeleri ayarlayın (daha kesin olması için ondalık yüzdeleri kullanabilirsiniz). Ayrıca seçim background-colorarasında transparentsize isabet alanlar görünmez olmak istiyorum çünkü kullanmaya hazır olduğunuzda.

David Bradshaw bu sorunu çözen güzel bir kütüphane yazdı. JQuery ile veya jQuery olmadan kullanılabilir.

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

Aşağıdaki yöntem benim için mükemmel çalışıyor, bu yüzden tam uygulamam:

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

Benim için çalışmak (koddaki 3 şeyi değiştirmeyi unutmayın):

• previousGenişlik (görüntünün orijinal boyutu)

• map_ID (resim haritanızın kimliği)

• img_ID (resminizin kimliği)

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/

Aynı gereksinimle karşılaşıyorum, herhangi bir ekran boyutu ve yeniden boyutlandırma ile yeniden boyutlandırabilen duyarlı görüntü haritası göstermek istiyorum, bu koordinatları vurgulamak istiyorum .

Bu yüzden ekran boyutuna ve olaya göre koordinatları yeniden boyutlandırabilen birçok kütüphaneyi denedim. Ve hemen hemen tüm tarayıcılarda iyi çalışan en iyi çözümü (jquery.imagemapster.min.js) aldım. Ayrıca görüntü haritası oluşturmak Summer Plgin ile entegre ettim .

 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>

Umarım birine yardım eder.

http://home.comcast.net/~urbanjost/semaphore.html , tartışmanın en üst sayfasıdır ve aslında sorunun JavaScript tabanlı bir çözümüne bağlantıları vardır. HTML'nin gelecekte yüzde birimleri destekleyeceğine dair bir bildirim aldım, ancak bu konuda oldukça uzun bir süredir ilerleme kaydetmedim (desteğin geleceğini duyduğumdan bu yana muhtemelen bir yıldan fazla oldu) muhtemelen JavaScript / ECMAScript ile rahat olup olmadığınıza bakmaya değer.

Github'daki resim haritası eklentisine göz atın . Hem vanilya JavaScript ile hem de jQuery eklentisi olarak çalışır.

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

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

Check demo .

Bağlıdır, bence aralıkları orantılı olarak ayarlamak için jQuery kullanabilirsiniz. Bu arada neden bir görüntü haritası kullanıyorsunuz? Ölçeklendirme div'larını veya başka öğeleri kullanamaz mısınız?

JavaScript'e başvurmak istemeyenler için bir resim dilimleme örneği:

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

Pencereyi ölçeklendirdikçe, palyaço resmi buna göre ölçeklenir ve palyaçonun burnu köprülü olarak kalır.

Orland'ın cevabına benzer: https://stackoverflow.com/a/32870380/462781

Chris'in kodu ile burada: https://stackoverflow.com/a/12121309/462781

Alanlar bir ızgaraya sığarsa, en boy oranını koruyan% olarak bir genişlik kullanarak alanları saydam resimlerle kaplayabilirsiniz.

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

% Olarak bir kenar boşluğu kullanabilirsiniz. Ek olarak "boşluk" görüntüleri 3. seviyeli bir div içine yan yana yerleştirilebilir.

Nedense bu çözümlerin hiçbiri benim için çalışmadı. Dönüşümleri kullanarak en iyi başarıyı elde ettim.

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

duyarlı genişlik ve yükseklik

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