ロールオーバー効果：Mousehoverで画像を変更する

画像を変更するホバーを作成しようとしています。多くのチュートリアルでは、onmouseoverとonmouseoutを試してみます。しかし、Brackets（私がコードに使用するプログラム）は、 "test2.png"という2番目の画像を見つけることができません。誰もが問題を処理する方法を知っていますか？HTMLのみを使用することをお勧めします。ここでロールオーバー効果：Mousehoverで画像を変更する

は私が達成したいかを示す私が見たチュートリアルです：

https://www.youtube.com/watch?v=qtpa_r1ILjo

https://www.youtube.com/watch?v=y4RJDUI7M8Y

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Portfolio V1</title> 

     <link rel="stylesheet" type="text/css" href="main.css"/> 
     <script type="text/javascript"></script> 
    </head> 
    <body> 
     <img src="images/test1.png" onmouseover="this.src=images/test2.png" onmouseout="this.src='test1.png'" > 
    </body> 
</html>

出典

2017-09-09 Philip Kuhn

：

あなたは、コードを確認することができます。
名前がコードに書き込む名前とまったく同じであることを確認してください。
問題の1つは、画像の名前をラップしなかったことです（の引用符は'images/test2.png'）。
onmouseoutには、images/test1.pngの代わりにtest1.pngにイメージを設定します。それは意図されていますか？ここで

実施例である：それはインプレースに動作しないのはなぜ

<img src="https://dummyimage.com/600x400/000/fff" onmouseover="this.src='https://dummyimage.com/600x400/f00/fff'" onmouseout="this.src='https://dummyimage.com/600x400/000/fff'" >

出典

2017-09-09 20:57:50 Dekel

うわー！あなたは天才です。私はこれを試し、それがうまくいくかどうか教えてくれるでしょう。 –

ありがとうございました！あなたのアドバイスをありがとうございました！このホバーにフェージング遷移を追加することが可能かどうかも知っていますか？それは少し厳しいように見えるので...？ –

フェージングの移行を行うには、2つの異なるイメージを使用する必要があります:)しかし、それは異なる質問のためです。 – Dekel

あなたはこの仕事をするためにJavaScriptを使用する必要があります。あなたが試したように、それはインプレースでは機能しません。

EDIT：インプレースで動作しますが、一重引用符を忘れてしまいました。

onmouseover属性では、JavaScript関数を参照する必要があります。詳細については、onmouseoverに関するthis questionをご覧ください。

<img src="images/test1.png" onmouseover="MouseOver(this)" onmouseout="="MouseOut(this)" >

今、あなたはのonmouseoverとれるonmouseoutイベントのイベントハンドラを参照してください：あなたはこのようなものを使用することができますたとえば

。しかし、これらのイベントハンドラは、まだjavascriptスニペットで定義する必要があります。これは、このような要素に埋め込まれ得ることができます：

function MouseOver(myimg) { 
    myimg.src="images/test2.png"; 
} 

function MouseOut(myimg) { 
    myimg.src="images/test1.png"; 
}

出典

2017-09-09 20:52:23 CWBudde

？ https://jsfiddle.net/5gLuv705/ – Dekel

本当にあります。その場合は、私が推測している見積もりは、 – CWBudde

です。それはすべて重要ですが、他の問題もあるかもしれません。（私の答えをチェックしてください...） – Dekel

私は背景色で例を作ったが、原理はここにあります。あなたは両方の画像が存在することを確認し、正しいフォルダに作成する必要があり

const div = document.querySelector('div'); 
 

 
window.addEventListener('mouseover',() => { 
 
\t div.style.background = 'red' 
 
})

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    opacity: 1; 
 
    background-color: green; 
 
    transition: 3s; 
 
}

<div></div>

出典

2017-09-09 20:53:53 Jonathan

ロールオーバー効果：Mousehoverで画像を変更する

答えて

関連する問題