0

地図の画像であるHTMLをフォローする必要がある場合。マップはカラーエリアに分割されています。私の目標は、カーソルが画像の領域上にある場合、画像を交換することです。

<div id="map" class="mouse-click"><img class="image-swap" src="images/map.png" /></div>

XY座標を見つけることができます

$('#map').mousemove(function(e){
    var x = e.clientX - this.offsetLeft;
    var y = e.clientY - this.offsetTop;
    $('#map-xy').html("X: " + x + " Y: " + y); 
});

カーソルが一連の座標の間にある場合に、クリックイベントを追加してimgを交換するにはどうすればよいですか。

どんな助けでも大歓迎です。

4

1 に答える 1

2 
$('#map').on('click', function(e){
    var x = e.clientX - this.offsetLeft,
        y = e.clientY - this.offsetTop;
    if (x > xMin && x < xMax && y > yMin && y < yMax) {
        // click was in target zone, swap img
    }
});

ここxMinでxMin、、、、yMaxおよびyMinはターゲット領域の境界を表します。

于 2012-01-16T00:18:04.670 に答える