HTMLとJavaScriptで画像のイベント

Question

私は、私は次のようにタグが付けられたイベントonmouseover()とonmouseout()をコントロールするいくつかのボタンを持っているバナー、で働いています：これは完璧に働いている

<img src="image_1.png" 
    onmouseover="this.src='image_2.png'" 
    onmouseout="this.src='image_1.png'" /> 

が、私がクリックしたときに画像を保持する何らかのイベントがあるかどうかを知りたいのですが、私がどのゾーンで作業しているかを知るためです。

私は自分自身を明確にしたいと思います。

私はセクション1、セクション2、セクション3を持っています。セクション1を選択すると、イメージセクション1がそのセクションで作業している穴の時間を選択されているように見えます。セクション2に変更すると、セクション2の画像だけが選択されたように見えます。

Answer 1

jquery hoverを試行して、現在の操作を維持できます。

fiddle example：

<img src="image_1.png" /> 

<script> 
$('img').hover(
function(){ 
    $(this).attr('src','image_2.png'); 
}, 
function(){ 
    $(this).attr('src','image_1.png'); 
}, 
); 
</script> 

たぶん、他の選択肢は、CSSのようになります。背景propertieを使用して、アクティブ・フィルタを：ホバーと。 See this css example

.Myimg{ 
display:block; 
    width: 100px; 
    height:100px; 
    background-image:url('img1.jpg'); 
} 

.Myimg:hover{ 
    background-image:url('img2.jpg'); 
} 

Answer 2

何についてonclickイベントはありますか？

Answer 3

私は非常にCSSを使用することをお勧め：onmouseover属性にイベントハンドラONMOUSEOUTを結合するのではなくpsuedoselectorを合わせます。

適切なチュートリアルhereを参照してください。

Answer 4

これが役に立つかもしれません：http://jsfiddle.net/BGurung/UDceq/

私は画像がクリックされたかどうかを指示するフラグを作成しました。マウスが出たときに、画像がクリックされた場合は、フラグをfalseに設定して戻り、その他は画像のソースを変更しただけです。

Answer 5

onmousedownがほしいと思うように聞こえます& onmouseup本当にあなたのやっていることに依存します。

http://www.w3.org/TR/DOM-Level-2-Events/