は、onclickイベントで無効になったonmouseoutを再度有効にする必要があります。

onClickコードで無効になっているonMouseOutを再度有効にするコードをここで検索しました。私はものを見つけましたが、私の状況ではうまくいきません。は、onclickイベントで無効になったonmouseoutを再度有効にする必要があります。

ページには、画像と対応するテキストの2つのdivを保持するコンテナdivがあります。画像の下には、4つのリンク（1,2,3,4）が順序付けられていないリストに配置されています。ビジターが＃2をロールオーバーすると、イメージはimg2に変更する必要があり、一致するテキストdivは「非表示」から「表示」に変わる必要があります。 onMouseOutはイメージとテキストを元のバージョンにリセットします。 onClickは、クリックされた画像/テキストを変更してから、onMouseOutを無効にします。

次に、訪問者が次回にその#linkをロールオーバーするときに、再びonMOuseOutを動作させる方法が必要です。今のように、onMouseOutが無効になると、ページをリロードするまで無効になります。ここで

は、これまでのコードです：

<head> 
<script> 
if (document.images) { 
book1 = new Image 
    book2 = new Image 
    book3 = new Image 
    book4 = new Image 

book1.src = "/llb/assets/book1.jpg" 
    book2.src = "/llb/assets/book2.jpg" 
book3.src = "/llb/assets/book3.jpg" 
    book4.src = "/llb/assets/book4.jpg" 
} 
function swapImage(thisImage,newImage) { 
if (document.images) { 
    document[thisImage].src = eval(newImage + ".src") 
} 


} 
function show_visibility(IDS){ 
hide_visibility(); 
document.getElementById(IDS).style.display = 'block'; 
} 

function hide_visibility(){ 
var sel = document.getElementById('bookleadin').getElementsByTagName('div'); 
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; } 

} 

</script> 
</head> 

<body> 

<div id="content"> 
    <div id="books"> 
     <div id="bookimages"> 
     <img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" /> 
     <ul> 
      <li><a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a></li> 
      <li><a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); this.onmouseout=''" onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a></li> 
      <li><a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a></li> 
      <li><a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a></li> 
     </ul> 
     </div><!-- end bookimages --> 
     <div id="bookleadin"> 
     <div id="bt1" style="display:block;"><p>Writing starts with living...</p> 
     </div> 
     <div id="bt2" style="display:none;"><p>The air is silk...</p> 
     </div> 
     <div id="bt3" style="display:none;"><p>I lived in the woods...</p> 
     </div> 
     <div id="bt4" style="display:none;"><p>I tried to forget...</p> 
     </div> 
    </div><!-- end bookleadin --> 
    <div class="spacer"></div> 
    </div><!-- ends books --> 
</div><!-- end content -->

リストアイテム＃2は、私がテストしていた例です。私はまだjavascriptの初心者/中級者ですので、どんな答えも私が理解してこのプロジェクトに適用するか、完全にコピーして貼り付けるだけで十分です。

ご協力いただきありがとうございます。

出典

2012-01-05 ssliver1

onclickにフラグを設定して、それがクリックされている場合は確認してから、スワップするとonmouseoutは何もしませんが、this.onmouseout = ""は実行しません。

EDIT：

<head> 
<script> 
    if(document.images) { 
     book1 = new Image 
     book2 = new Image 
     book3 = new Image 
     book4 = new Image 

     book1.src = "/llb/assets/book1.jpg" 
     book2.src = "/llb/assets/book2.jpg" 
     book3.src = "/llb/assets/book3.jpg" 
     book4.src = "/llb/assets/book4.jpg" 
    } 
    var swap_list = {}; // a list of swapped elements 
    function swapImage(thisImage, newImage) { 
     if(typeof swap_list[thisImage] == 'undefined' || swap_list[thisImage]=='') 
      if(document.images) { 
       document[thisImage].src = eval(newImage + ".src"); 
       swap_list[thisImage] = newImage; 
      } 
     else 
      { 
       swap_list[thisImage] = ''; 
       document[thisImage].src = "../llb/assets/book1.jpg"; 
      } 
    } 

    function show_visibility(IDS) { 
     hide_visibility(); 
     document.getElementById(IDS).style.display = 'block'; 
    } 

    function hide_visibility() { 
     var sel = document.getElementById('bookleadin').getElementsByTagName('div'); 
     for(var i = 0; i < sel.length; i++) { 
      sel[i].style.display = 'none'; 
     } 

    } 
</script> 
</head> 
<body> 
    <div id="content"> 
     <div id="books"> 
      <div id="bookimages"> 
       <img id="bookcover" name="bookcover" src="../llb/assets/book1.jpg" /> 
       <ul> 
       <li> 
         <a href="#" onclick="swapImage('bookcover','book1'); show_visibility('bt1'); " onMouseOver="swapImage('bookcover','book1')" onMouseOut="swapImage('bookcover','book1')">1</a> 
       </li> 
       <li> 
        <a href="#" onclick="swapImage('bookcover','book2'); show_visibility('bt2'); " onMouseOver="swapImage('bookcover','book2')" onMouseOut="swapImage('bookcover','book1')">2</a> 
       </li> 
       <li> 
        <a href="#" onclick="show_visibility('bt3'); swapImage('bookcover','book3')" onMouseOver="swapImage('bookcover','book3')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book3')">3</a> 
       </li> 
       <li> 
        <a href="#" onclick="show_visibility('bt4'); swapImage('bookcover','book4')" onMouseOver="swapImage('bookcover','book4')" onMouseOut="swapImage('bookcover','book1')" onclick="swapImage('bookcover','book4')">4</a> 
       </li> 
      </ul> 
     </div><!-- end bookimages --> 
     <div id="bookleadin"> 
      <div id="bt1" style="display:block;"> 
       <p> 
        Writing starts with living... 
       </p> 
      </div> 
      <div id="bt2" style="display:none;"> 
       <p> 
        The air is silk... 
       </p> 
      </div> 
      <div id="bt3" style="display:none;"> 
       <p> 
        I lived in the woods... 
       </p> 
       </div> 
       <div id="bt4" style="display:none;"> 
        <p> 
        I tried to forget... 
        </p> 
      </div> 
      </div><!-- end bookleadin --> 
      <div class="spacer"></div> 
     </div><!-- ends books --> 
    </div><!-- end content --> 
</body>

出典

2012-01-06 00:31:34 khael

私はあなたを理解かどうかを確認するために、それを修正してくださいしてみましょう。私はonClickが起こったかどうかを決定する関数を書くだろう。 trueの場合は、onMouseOutを無効にします。falseの場合、onMouseoutには触れません。そのため、カーソルがリンクから外れて元のものが再び表示されたときにも発生します。私はverify関数をどこから呼び出しますか？ onMouseOutイベントを無効にするためにどのようなコードを使用すればいいですか？また、ユーザーが別のリンクをクリックまたはクリックすると、そのリンクを再び有効にする方法はありますか？ – ssliver1

@ ssliver1あなたはonmouseoutを無効にしません。あなたがonclickが起こった場合にそれを確認します。あなたはいくつかのコードが必要ですか、アルゴリズムの純粋なロジックで十分ですか？ – khael

多分私はいくつかのコードが必要です。私はonclickを確認するためのチェックをいつトリガするのかを把握しようとしています。各リンクには、mouseOver、mouseOut、onCLickという3つのイベントがあります。彼らがリンクをクリックすると、私は何もしないでmouseOutをする必要があります。クリックしなかった場合は、アクションを完了するためにmouseOutが必要です。ご協力ありがとうございました。 – ssliver1

は、onclickイベントで無効になったonmouseoutを再度有効にする必要があります。

答えて

関連する問題