MouseOverで画像を変更

私はJavaScriptとHTMLの新機能です。マウスを置くと画像が変わるコードが入力されていますが、動作しますが、非常に長く繰り返しがあるため、は、ここでは、コードです：MouseOverで画像を変更

<doctype html> 
<html> 
<head> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       <img src="image1.jpg" height="200px" width="300px" 
onmouseover="rollover(this)" onmouseout="mouseaway(this)/> 
      </td> 
      <td> 
       <img src="image2.jpg" height="200px" width="300px" 
onmouseover="rollover1(this)" onmouseout="mouseaway1(this)"/> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <img src="image3.jpg" height="200px" width="300px" 
onmouseover="rollover2(this)" onmouseout="mouseaway2(this)"/> 
      </td> 
      <td> 
       <img src="image4.jpg" height="200px" width="300px" 
onmouseover="rollover3(this)" onmouseout="mouseaway3(this)"/> 
      </td> 
     </tr> 
    </table> 
<script language="javascript"> 
function rollover(img1) 
{ 
    img1.src = 'image2.jpg'; 
} 
function mouseaway(img1) 
{ 
    img1.src = "image1.jpg"; 
} 
function rollover1(img2) 
{ 
    img2.src='image3.jpg'; 
} 
function mouseaway1(img2) 
{ 
    img2.src='image2.jpg' 
} 
function rollover2(img3) 
{ 
    img3.src='image4.jpg'; 
} 
function mouseaway2(img3) 
{ 
    img3.src='image3.jpg' 
} 
function rollover3(img4) 
{ 
    img4.src='image1.jpg'; 
} 
function mouseaway3(img4) 
{ 
    img4.src='image4.jpg' 
} 

</script> 
</body> 
</html>

出典

2017-03-29 Stoufa Gheribi

あなたは一つの関数を作成し、それらに画像を表示するためにとして引数を与えたいです。このような何か：

function rollover(img, src) { 
    img.src = src 
}

その後超えるとアウトに同じ関数を呼び出す：

<img src="image4.jpg" height="200px" width="300px" 
onmouseover="rollover(this,'image1.jpg')" onmouseout="rollover(this,'image4.jpg')"/>

あなたは、このようなjqueryのようライブラリをロードする場合、これはさらに簡単です。ここではその使用例を示します。イベントを繰り返す必要はありません。ただ、イベント前にロードされた各画像にページを確保するためにあなたは$(document).ready(...)でそれをラップしたクラスのクラス名を使用して

<img src="image4.jpg" class="rollover">

次に割り当てるイベントは（クラスが有力.によって識別されます）

$(document).ready(function() { 
    $('.rollover').mouseover(function(e) { 
     this.old_src = this.src; // remember what the old src was 
     this.src = 'image1.jpg'; 
    }); 
    $('.rollover').mouseout(function(e) { 
     this.src = this.old_src; 
    }); 
});

を与えます添付されています。

出典

2017-03-29 04:29:14 Cfreak

この方法では、彼はJQueryをインポートする必要があるかもしれませんが、彼は "javascriptとHtmlの初心者です"。それにも言及してください。 –

簡単な答えは次のとおりです。

<img onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" height="200px" width="300px" src="image1.jpg">

出典

2017-03-29 04:28:10

作品が、本当に、コードの再利用を誇示しません。 – Cfreak

各画像タグに必要なすべての情報を保存することができます。それぞれの画像タグに追加機能を作成する必要はありません。

例えば

document.addEventListener('DOMContentLoaded',() => { 
 
    Array.from(document.querySelectorAll('img[data-src-enter]')).forEach(img => { 
 
    img.setAttribute('data-src-out', img.src) 
 
    img.addEventListener('mouseenter',() => { 
 
     img.src = img.getAttribute('data-src-enter') 
 
    }, false) 
 
    img.addEventListener('mouseout',() => { 
 
     img.src = img.getAttribute('data-src-out') 
 
    }, false) 
 
    }) 
 
})

<p> 
 
    <img src="http://lorempixel.com/50/50/cats/1/" data-src-enter="http://lorempixel.com/50/50/cats/2/"> 
 
</p> 
 
<p> 
 
    <img src="http://lorempixel.com/50/50/cats/3/" data-src-enter="http://lorempixel.com/50/50/cats/4/"> 
 
</p>

出典

2017-03-29 04:37:17 Phil

上記のすべての答えが良いです。私はちょうどあなたもdata- *属性を使用することができますを追加したい。 JSで

<img src="image1.jpg" height="200px" width="300px" onmouseover="rollover(this)" onmouseout="mouseaway(this)" data-hover-img="image1.jpg" data-normal-img="image2.jpg" />

：

function rollover(img) 
{ 

    img.src = this.dataset.hoverImg; 


} 
function mouseaway(img) 
{ 

    img.src = this.dataset.normalImg; 

}

出典

2017-03-29 04:37:56 dev8080

答えて

関連する問題