マウスオーバーで画像が変化するリンクをCSSを使わずにhtmlのみで記述する

msovclc.jpgマウスオーバーとはマウスポインタ(矢印)が乗った状態のこと。一般的にはマウスオーバーとは、マウスポインタが乗ったときに画像が変化する動作処理のことで、正確には「ロールオーバー表現」というのが正しいらしい。
ここではマウスオーバーということにするが、マウスオーバー処理にはCSSを使う記述方法が一般的である。しかし、なんらかの事情でCSSの記述が難しい場合はhtmlの記述だけでも表示することができる。

マウスオーバーで画像が変化するリンクをhtmlのみで記述する

マウスオーバー画像

上記の写真リンクのhtmlソースは以下のとおり

<a href="https://dm2.co.jp/face.html">
<img src="https://dm2.co.jp/img/tohda800800_01_2018.jpg" width="200" alt="マウスオーバー画像" onmouseover="this.src='https://dm2.co.jp/img/tohda800800_02_2018.jpg'" onmouseout="this.src='https://dm2.co.jp/img/tohda800800_01_2018.jpg'" />
</a>

画像1は
https://dm2.co.jp/img/tohda800800_01_2018.jpg


画像2は
https://dm2.co.jp/img/tohda800800_02_2018.jpg

この手法は、JavaScriptを使用している。そのため閲覧側でJavaScriptの動作をオフにしている場合は正しく動作しないのが弱点である。また、スマホでの閲覧には効果がない。なので、マウスオーバーをする重要度は減っている。

このhtmlの記述にはhttps://html-coding.co.jp/knowhow/tips/rollover/の記事を参考にした。


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2018/07/onmouseover.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2018/07/onmouseover.html」をQRコードで表示「https://dm2.co.jp/2018/07/onmouseover.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。