onMouseOver、onMouseOutで、簡単に画像を切り替える

LINEで送る
Pocket

今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させたりしてました。
反対に言えば、このやり方しか知りませんでした。恥ずかしながら。。

でもある時どうしても上記の方法ではうまくいかない事があり、onMouseOver、onMouseOut属性に辿り着いたわけなのですが、これ、すんごい楽チンですね。cssもjQueryも使わなくてもできるので。

ってことで、その書き方をメモ。例えば、、、

<a href="#">
<img src="img/ABC.jpg" onMouseOver="this.src='img/ABC_over.jpg'" onMouseOut="this.src='img/ABC.jpg'" />  
</a>

こんな感じ。
ちなみに、onMouseOverでも、onmouseoverでも、onMouseoverでも、大文字小文字関係なくきくようですね。
超〜簡単!でも注意点はあるようで、onMouseOutを設定しないと、MouseOutした時に画像がなくなっちゃいます。
ま、これはきちんと書けば問題ないのですが、これはJavaScripを使ってるので、閲覧する側のブラウザで、JavaScriptが有効になっていない場合は機能しません。

ついでにIEについても一口メモ。
サーバーにアップする前、ローカル上では safari,chrome,firefoxでチェックをして問題なく使用できたので、ま、IEも大丈夫だろうと思って最後にチェックしてみたら、やっぱり動かない。。いつもの事ながらIEほんま死んでくれ(–;)と思ったのですが、
これはサーバーにアップすればIEでも動きます。バージョンは7,8,9では動いた記憶があるのですが、当方Mac環境で自宅にはwindowsがないので、今確認はできませんが、たぶん動きます。動かなかったらごめんなさいm(__)m

ちなみにこれで、テキストも変更できます。
それは次に書こかな。



関連記事

WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


お名前.com から脱出する!:ドメインの移管方法


『お名前.com』でドメイン取得してからは、『Whois情報公開代行』の件(詳細はこちら)で大変な思いをしたのですが、そ…

記事を読む▷


『WinSCP』をMacで使えるようにする方法!!


FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…

記事を読む▷


onMouseOver、onMouseOutで、簡単にテキストを切り替える!


前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。 実はこちらサイト…

記事を読む▷


2017最新版:SNS等の公式ロゴ(アイコン)素材のまとめ(Facebook, Instagram, Youtube, Twitter, Line etc.)


一度サイトを作ってしまうとなかなか更新せず使い回してしまうのが、この『SNSのロゴ(アイコン)』だと思うのですが、サイト…

記事を読む▷


OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

PAGE TOP