マウスオーバーで画像を変えるHTML

画像を二枚準備してマウスオーバー時に画像を変えるhtmlです。

リンクを張るときは下記のコードを

<a href=”リンク先”>  </a>  で囲みます。

 

/*ロールオーバー*/

<img src="画像1" onmouseover="this.src='画像2'" onmouseout="this.src='画像1'" />

元画像が画像1、マウスオーバー画像が画像2、マウスを離したときの画像が画像1

 

ワードプレスでも使えます。テキストにコードーを貼り付ければよいです。

 

画像を半透明にする場合はこちら

おすすめの記事