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

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



関連記事

no image

テキスト、画像を選択できなくする方法


facebookで『続きを読みたかったらいいねを教えてね!』みたいな記事がよくありますが、必ずそういう記事に限ってコピペ…

記事を読む▷


resolution-list_00

【2019最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)


最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレ…

記事を読む▷


OPG設定_3

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


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

記事を読む▷


スマホ、携帯からタップ(クリック)で電話を発信する、htmlの記述方法 コピペでOK!!


スマホ等のタブレット、また携帯で、電話番号をタップ(クリック)して直接かけるhtmlの記述方法です。 …

記事を読む▷


GoToTopBG_animation2のgif画像

CSSスプライトで、スムーズに画像を切り替える


マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくる…

記事を読む▷


z-index が効かない時の対処方法


z-index が効かない時がちょくちょくあります。でも、仕事でそういう場合に遭遇すると、その場しのぎで対処法を見つけて…

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


アイキャッチ_はてぶ

はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法!


ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


日付を自動更新で表示させる! 簡単コピペ!!


先週『日付を毎月変えるの邪魔くさいし、サイトに書いてる日付とってくれへんやろか?』という依頼がありました。 とって…

記事を読む▷


Message

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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

PAGE TOP