39

私は現在、ウィンドウのサイズに応じてサイズが変更されるイメージマップを自分のサイトで作成しようとしています...これをHTMLで行う方法があるのか​​、それともJavascriptなどで行う必要があるのか​​疑問に思いました。言語。

<div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="1920" height="1080" alt="" />
<map id="_Image-Maps_5201211070133251" name="Image-Maps_5201211070133251">
<area shape="poly" coords="737,116,1149,118,944,473," href="http://essper.bandcamp.com" alt="Bandcamp" title="Bandcamp"   />
<area shape="poly" coords="1006,589,1418,590,1211,945," href="http://soundcloud.com/essper" alt="Soundcloud" title="Soundcloud"   />
<area shape="poly" coords="502,590,910,591,708,944," href="http://facebook.com/the.essper" alt="Facebook" title="Facebook"   />
</map>

4

12 に答える 12

50

JavaScript でタスクを実行することになった場合、要素内のすべての領域のサイズを変更するためのクロスブラウザー コードニペットを次に示しMAPます。

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / 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'));
    imageMap.resize();
}

previousWidth元の画像の幅と等しくなければなりません。また、HTML では相対単位を使用する必要があります。

<div style="width:100%;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" />

jsFiddleでの作業デモ。IE でフィドルを開くと、AREAクリックすると実際に s が表示されます。

于 2012-11-10T12:28:28.560 に答える
1

私は先週同じ問題を抱えていたので、最終的にこのための jQuery プラグインを作成しました。

プロジェクト gitHub は次のとおりです。

https://github.com/etienne-martin/mapify

基本的な使い方:

$("img[usemap]").mapify();

実際の例

http://emartin.ca/mapify/

于 2014-11-12T23:41:05.247 に答える
1

これが機能するには、元の画像にdata-original-coords属性を持つ必要がありますcoords

$(function () {
    function adjeustCoords() {
        var image=$('img'); //change that to your image selector
        var originalWidth=image[0].naturalWidth;
        var currentWidth=image.width();
        var ratio=currentWidth/originalWidth;
        $("map area").each(function(){
            //change that to your area selector
            var coords=$(this).attr('data-original-coords').split(',');
            coords = coords.map(function (x) {
                return Math.round(x*ratio);
                //i don't know if all browsers can accept floating point so i round the result
            });
            $(this).attr('coords',coords.join());
        });
    }
    adjeustCoords();
    $(window).resize(function(){
        adjeustCoords();
    });
});

これは chrome 、 firefox 、および edge の最小バージョンで動作します

于 2016-03-18T22:49:53.093 に答える
0

これは直角座標でのみテストしましたが、円形または多角形に一般化する必要があると思います

function wrap ( img, map ) {
  var originalCoords = [ ],
      test = new Image();

  for ( var i = 0; i < map.areas.length; ++i ) {
    var coords = map.areas[i].coords;
    originalCoords.push( coords.split( "," ).map( parseFloat ) );
  }

  function resize () {
    var ratio = img.width / test.width;
    for ( var i = 0; i < map.areas.length; ++i ) {
      map.areas[i].coords = originalCoords[i].map( function ( n ) {
        return ratio * n;
      } ).join( "," );
    }
  }

  test.addEventListener( "load", function () {
    window.addEventListener( "resize", resize, false );
    resize();
  }, false );

  test.src = img.src;
}

var imgs = document.querySelectorAll( "img[usemap]" );
for ( var i = 0; i < imgs.length; ++i ) {
  var map = document.querySelector( "map[name=" + imgs[i].useMap.substring( 1 ) + "]" );
  wrap( imgs[i], map );
}
于 2015-10-16T20:40:09.340 に答える
0

イメージ マップを管理するために作成した別のプラグインを次に示します: https://github.com/gestixi/pictarea

特に、領域は画像のサイズに応じて自動的にスケーリングされます。キャンバスを使用して領域をレンダリングしていることに注意してください。

基本的な使い方:

$(function() {
  $('#map').pictarea({
    rescaleOnResize: true
  });
});
于 2016-05-20T09:58:22.623 に答える
0

これを実現するには、CSS スプライトを使用できます。画像の断片が 1 つの画像に収まるようになり、このようにして、すべての画像をロードするために 1 つの http 要求を作成するだけになります。この手法は JavaScript を必要とせず、background-position;プロパティを使用して画像を移動するだけです。

これは、ページを最適化するための効率的な手法です。

于 2012-11-10T10:34:24.813 に答える