onmouseoutとonclickと矛盾しています

私はJavaScriptを使って画像のスワップを制御しています。画像をクリックすると画像の「点灯」バージョンに変わります。リンクタグ内でこれを行うコードはonclick="changeto('wdl')"で、リンクにonmouseover="changeto('wdl')"を追加したので、その上にカーソルを置くと点灯します。onmouseoutとonclickと矛盾しています

問題が発生する場所は、当然、画像の消灯バージョンであるonmouseout="changeto('wdd')"を追加したときです。ここで何が起きるかは、私がカーソルを置いたときに点灯し、カーソルを動かすと非点灯バージョンに変わります。しかし、それをクリックすると、画像は点灯したバージョンに変更されますが、onmouseoutコマンドのために、消灯したバージョンに変更されます。

私が欲しいのは、画像上にマウスを置いて点灯させることです。マウスをクリックしてマウスを離すと、点灯したままになりますが、クリックしてマウスを動かすと「オフ」の画像が表示されます。

私はここで困っています。私はif (!this)の種類のものを使用しようとしていましたが、私は正直なところ分かりません。

出典

2012-04-05 Corbin Holbert

いくつかのコード例は、あなたが探している答えを与えるのに大いに役立つかもしれません。 –

~~W3Schoolsの上~~

JS、CSSのホバーからクリックの一部を行うためのCSSホバーを見上げて（または使用 !important 2. onmouseoutに onclickに trueに設定して試験されるフラグ変数：

onclick="changeto('wdl');flag=true;" onmouseout="if (!flag) changeto('wdd')"

~~ここで~~

は、CSSとJavaScriptで簡単な例です：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Example</title> 
     <style> 
      #whl { 
       background: #e0e0ff; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #wdl { 
       background: #e0ffe0; 
       line-height: 150px; 
       text-align: center; 
       width: 150px; 
      } 
      #whl:hover { 
       background: #ffcccc; 
      } 
      #wdl:hover { 
       background: #ffcccc; 
      } 
      #whl.selected { 
       background: #ffcccc; 
      } 
      #wdl.selected { 
       background: #ffcccc; 
      } 
     </style> 
     <script> 
      function doClick(el) { 
       document.getElementById("whl").className = document.getElementById("whl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       document.getElementById("wdl").className = document.getElementById("wdl").className.replace(/(?:^|\s)selected(?!\S)/ , ''); 
       el.className += "selected"; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="whl" onclick="doClick(this);">WHL</div> 
     <div id="wdl" onclick="doClick(this);">WDL</div> 
    </body> 
</html>

それは色で動作し、あなたのケースであなたは（CSSの）背景画像と色を交換する必要があります。

出典

2012-04-05 02:02:01

はい。グローバル変数 'flag'を宣言し、最初に' false'に設定します。それは悪い習慣ですが、コードなしでは、私は本当に何か良いことを示唆することはできません。 –

私はあなたのコードを見て、私は明らかな解決策を見つけることができませんでした。私は@josnidhinの解決策をとるつもりです - クリックには異なるCSSクラスとJavascriptを使用しますが、これはページのかなりの部分を書き直す必要があります。 –

いつも歓迎:-) –

CSSとjavascriptの組み合わせを使用する必要があります。 1. wdd次のように定義されonclickイベントのために別のCSSクラスを宣言します：マウスオーバー機能を実現し、私は2つのソリューションを参照してくださいhttp://www.w3schools.com/cssref/sel_hover.asp

出典

2012-04-05 02:01:48 Josnidhin

onmouseoutとonclickと矛盾しています

答えて

関連する問題