ワードプレスで「画像にマウスオーバーさせた時に画像が切り替わるようにしたい」と思う時もあるかと思います。そのような時に使える方法です。直接書く方法とプラグインを使う方法です。
まずは、表示させる画像、マウスを乗せた時に切り替わる画像の2つの画像を用意しておきます。
【方法1】onmouseoverを使う
onmouseover、onmouseoutを使うと、画像をマウスオーバー(ロールオーバー)した時、画像からマウスアウト(ポインタを離した)ときの画像を設定することができます。
<img src="" onmouseover="this.src=''" onmouseout="this.src=''">
できました…!(下の画像にマウスを合わせると切り替わります)
![](/wp-content/uploads/figure_tasuke.png)
onmouseoverのイベントハンドラーとは
GlobalEventHandlers.onmouseoverとは?
onmouseover は GlobalEventHandlers ミックスインのプロパティで、mouseover (en-US) イベントを処理すイベントハンドラーです。
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onmouseover
【方法2】プラグインを使って画像を切り替える
設定する画像がたくさんあるが1枚ずつカスタムHTMLで設定するのは手間が掛かってしまう…という場合にはプラグインを使って簡単に設定することができます。
[rml_read_more]
Ultimate Hover Effectsというプラグインなどもオススメです。マウスオーバーで画像にエフェクト効果を付けることができます。
![](https://eguweb.jp/wp-content/uploads/0dcf3bc1c1bb249151f7dba71098b108-1024x316.jpg)
![](https://ps.w.org/ultimate-hover-effects/assets/banner-772x250.png?rev=1785083)
プラグインをインストールして有効化すると、メニューにプラグインのメニューが追加されます。
![](https://eguweb.jp/wp-content/uploads/baa04ce66e5a92f13a7f3161b5f0b4f8.jpg)
Hover Effectsしたい画像を設定します。
![](https://eguweb.jp/wp-content/uploads/46cbc5aee62d4aef11338b0cef8fc68a-1024x666.jpg)
![](https://eguweb.jp/wp-content/uploads/d202899e680853b1b5179eba1851e819-1024x610.jpg)
このようなプラグインもあるようです。
>>Image Hover Effects Block
![](https://eguweb.jp/wp-content/uploads/8f7be59120940a3cb0cafde06ea1aa06-1024x336.jpg)
![](https://ps.w.org/image-hover-effects-block/assets/banner-772x250.png?rev=2117422)
![](https://eguweb.jp/wp-content/uploads/0a6753711966acd739f96e41d2340d1f-1024x743.jpg)
![](https://eguweb.jp/wp-content/uploads/5aa9e69399732e2f6e2bd9ec5611d616-1024x578.jpg)
使い方については…長くなりそうですので、また別の記事で後述していきます。
まとめ
ワードプレスで「画像にマウスオーバーさせた時に画像が切り替わるようにしたい」と思ったときは、今回の2つの方法のどちらかで実現することが可能です。
検索してもプラグインがほとんど見当たらなかったので(検索の仕方もあるのかもしれませんが…)もしかすると単に「マウスオーバーで画像を切り替えるだけ」といったプラグインというのは、少ないのかもしれません。他にもあるかもしれませんので、また何か発見した時は追記していきたいと思います。
工夫次第で自力でも実現できそうですね!スキルアップしていきましょう!