10

私はモックアップ (HTML、JS/jQuery を使用) と、Map が適用された (インターフェイスの) 単一の画像を持つクライアント用の CSS を作成しています。特定の領域をクリックすると、アニメーションを含むアクションが実行され、画像が変更されsrc(インターフェース間を移動しているように見えます)、別のイメージマップが画像に適用されます (おそらく<img>タグを言う必要があります）

クライアントはこれを求めました。狂気のように思えますが、アニメーションを実行するためのモックアップ ツールがありません。

パターンに気付き、コードをリファクタリングして、拡張と保守を容易にすることができました。ただし、次の HTML があるとします。

<img src="claas_ipad3.jpg" USEMAP="#claas_ipad3" width="1130" height="871" alt="" border="0" id="mainPage">
    <map name="claas_ipad3">
      <area shape="rect" coords="181,249,255,341" href=""  alt="" id="Contacts">
      <area shape="rect" coords="345,251,454,341" href=""  alt="" id="Appointments">
      <area shape="rect" coords="533,256,576,311" href=""  alt="" id="Maps">
      <area shape="rect" coords="686,255,785,344" href=""  alt="" id="Tasks">
      <area shape="rect" coords="835,246,973,348" href=""  alt="" id="Products">
      <area shape="rect" coords="176,412,278,513" href=""  alt="" id="Reports">
      <area shape="rect" coords="330,411,457,513" href=""  alt="" id="PriceTable">
      <area shape="rect" coords="502,399,637,518" href=""  alt="" id="SalesCycle">
      <area shape="rect" coords="677,398,808,519" href=""  alt="" id="MetaData">
      <area shape="rect" coords="844,408,970,510" href=""  alt="" id="Settings">
      <area shape="rect" coords="173,545,283,662" href=""  alt="" id="Vids">
      <area shape="rect" coords="328,558,461,652" href=""  alt="" id="Web">
      <area shape="rect" coords="491,559,626,666" href=""  alt="" id="Files">
    </map>

領域がクリックされたかどうかを JavaScript または jQuery を使用して判断することはできますか? その後、ID を特定して正しいアクションを実行できました。私が現在持っているのは、このようにさまざまな条件です...

 $("#Contacts").click(function(event){
            event.preventDefault();

            // okay lets show the contacts interface
            $("#mainPage").fadeOut(300, function(){
                $(this).attr('src','claas_ipad3_1.jpg').bind('onreadystatechange load', function(){
                    if (this.complete){
                        $(this).fadeIn(300);
                        $(this).attr('USEMAP','#claas_ipad_1');
                    }
                    });
                });
            });

ただし、(ID を判別することによって) クリックされたエリアがわかっている場合は、マップ エリアに具体的にバインドするのではなく、配列値を汎用関数に適用できます。

クリックされたもののIDを次のように判断できると考えていました。

$(this).live('click', function () {
    alert($(this).attr('id')); 
});

ただし、これはページ全体に影響します。これは問題ではありませんが、機能しないことはわかっています。

うまく説明できていなかったり、文章が下手だったりしたらすみません。必要に応じて、拡張または言い換えることができます。

ありがとう

アップデート

これを解決しました。次を使用してIDをマップに適用すると、IDが返されます

 $("#Map1 area").click( function () {
        alert($(this).attr('id')); // this
    });
4

1 に答える 1

9

さまざまなアプローチがあります。一番簡単なのはこれだと思います：

$("map[name=claas_ipad3] area").live('click', function () {
    alert($(this).attr('id')); 
});

jQuery 1.7 の時点で、.live() メソッドは非推奨であり、.on() を使用してイベント ハンドラーをアタッチする必要があることに注意してください。

$("map[name=claas_ipad3] area").on('click', function () {
    alert($(this).attr('id')); 
});
于 2012-06-11T10:16:03.567 に答える