2016-11-12 19 views
0

私は、表示されている3つの画像のうちの1つをマウスで動かすと、現在の画像が新しい画像に置き換えられるようにJavaスクリプトコードを作成します。 最初に、イメージ要素のマウス入力イベントのイベントハンドラを作成します。私はそれがロールオーバー画像のURLを指すように、このハンドラはイメージ要素のsrc属性を変更したいです。 第二:私はイベントを、マウスを記述する必要があります。このハンドラは、画像要素のsrc属性を元の画像に戻す必要がありますJavaScript。画像ロールオーバー

ここはhtmlコードです。

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>Image Rollovers</title> 
 
\t <link rel="stylesheet" href="main.css"> 
 
\t <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> \t 
 
    <script src="rollover.js"></script> 
 
</head> 
 
\t 
 
<body> 
 
\t <section> 
 
\t \t <h1>Ram Tap Combined Test</h1> 
 
\t \t <ul id="image_rollovers"> 
 
\t  \t <li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li> 
 
\t  \t <li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li> 
 
\t  \t <li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li> 
 
\t  </ul>   
 
\t </section> 
 
</body> 
 
</html>

答えて

1

CSSでこれを行うためにきれいになります:

#img { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background-image: url("https://placebear.com/200/200"); 
 
} 
 

 
#img:hover { 
 
    background-image: url("http://placekitten.com/200/200"); 
 
}
<div id="img"></div>

しかし、あなたが本当にイベントリスナーのアプローチを使用する場合:

var img = document.querySelector('img'); 
 

 
img.addEventListener('mouseover', function() { 
 
    this.src = "https://placekitten.com/200/200" 
 
}) 
 

 
img.addEventListener('mouseout', function() { 
 
    this.src = "https://placebear.com/200/200" 
 
})
img { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
}
<img src="https://placebear.com/200/200">

関連する問題