0

基本的な map タグと area タグを使用してイメージ マップを作成しました。マップをテストしたところ、すべてのエリアが想定どおりに動作したため、HTML は間違いなく正しいものです。

エリアをクリックすると、マップ イメージのソースが別のものに置き換えられます。当然、もう一度クリックすると、マップ ソースは元の状態に戻ります。これは基本的にクリック/クリック解除タイプのイベントであり、クリック解除.bind()を行うために使用しようとしています。何らかの理由で、機能していないようです。

コードは次のとおりです。

$(document).ready(function(){
$("#area1").click(function(){ 
$("#londonmap").attr('src','images/clickimage.png');
});
$("#area1").unbind("click", function() {
$("#londonmap").attr('src','images/originalimage.png');
});
});

クリックしてアンバインドする代わりに、マウスオーバー/マウスアウトでこれをテストしましたが、これは問題なく動作しますが、もちろんこれは iPad に適していません。ただし、これを試みると、クリックのみが機能し、次にその領域をクリックしても何も起こりません。

.unbind() の実装方法に問題があると思われます

jQuery初心者を助けてくれてありがとう！

4

1 に答える 1

2

アップデート

オリジナル

この.unbindイベントは、クリック イベントをまとめて削除します。現在のコードでは、画像が一度クリックされると、クリックイベントが削除され、クリックできなくなります...永遠に、悲しい時です! 次のようにイメージ src を切り替えてみてください。

$(document).ready(function()
{
    var images = ['http://www.doggyplanet.co.uk/images/new-icon-images/Dog-cartoon.png', 'http://s.thumbs.canstockphoto.com/canstock2134964.jpg'];
    $('#area1').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != images[0] ? images[0] : images[1];

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
});​
于 2012-05-22T14:53:57.270 に答える