0

対応する画像マップを含む画像を含む既存のHTMLページがあります。

別のページで画像を使用したいのですが、使用可能なスペースが小さいため、拡大縮小する必要があります。問題は、画像を拡大縮小すると、画像マップが機能しなくなることです。

画像と画像マップの組み合わせと同じ効果を実現しながら、画像を拡大縮小するにはどうすればよいですか？

4

1 に答える 1

0

画像マップのリサイザーは次のとおりです。

http://blog.outsharked.com/p/image-map-resizer.html

使用する重要なコードの簡略版は次のようになります。

map.find('area').each(function() {
    var j,coordx,coordy,
        area = $(this),
        coords = area.attr('coords').split(','),
        isVisible=true,
        newCoords = ''; 

     for (j = 0; j < coords.length; j+=2) {
             coordx = parseInt(coords[j],10);
             coordy = parseInt( coords[j+1],10);

             // ignore last coord if uneven numbers (meaning it's a circle)

             newCoords += (!newCoords ? '' : ',') + Math.round(coordx * xAmount) + 
                (j+1<coords.length ? ','+ Math.round(coordy * yAmount) : '');
        }
}

基本的に、座標データを再計算しながら、各領域を反復処理します。

window.resizeこれをイベントと調整して、イメージマップとイメージのサイズを同時に変更できるはずです。window.resize は、ユーザーがウィンドウをスケーリングするたびに何度も発生するため、イベントが発生するたびにイメージマップのサイズを変更しようとは思わないでしょう。計算負荷が高いため、ユーザー エクスペリエンスが遅くなる可能性があります。代わりに、バッファリングして、時々サイズ変更するだけにしてください。

これは、ImageMapster jquery プラグインを使用して window.resize イベントをバッファリングして同じことを行う方法を示すフィドルです: http://jsfiddle.net/jamietre/jQG48/

于 2013-01-11T11:29:29.013 に答える