htmlソース

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

2018.07.30
この記事は約2分で読めます。

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

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

マウスオーバー画像

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

<a href=”https://www.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>

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

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

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

なので、マウスオーバーをする重要度は減っている。

mskbup3405231.jpg

マウスオーバーという言葉はマウスを使うのが前提のような印象がある。私はマウスをほとんど使わないのと、スマホやタブレット利用のほうが増えているので、だんだんマウスオーバーという言葉にも違和感がでてきた気もする。

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

どもども通信のメルマガは毎月１日発行です

どもども通信

当社の月刊情報誌の「どもども通信」をPDFでご覧いただくことができます。

どもども通信

詳しくは上記のリンクをクリックして専用ページでお確かめください。

どもどもメルマガイメージ
なお、当社にはメルマガが２つあります。

「どもどもカフェ（毎週日曜日夜発行）」のメルマガと「どもども通信（毎月１日発行）」のメルマガの２つです。

この２つのメルマガは別の内容ですのでご注意ください。

【本日の運試し】

どもどもおみくじで本日の運試しをしてみませんか？

おみくじボタン

  • ラッキーモード：大吉の確率50％
  • 標準モード：標準的な確率です
  • いばらの道モード：大吉の確率１％
シェアする
遠田幹雄（とおだみきお）