onMouseOver、onMouseOutで、簡単に画像を切り替える
- 2013/09/22
- HowTo, Webデザインテクニック
今までマウスオーバー等で画像を切り替える時は、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
ちなみにこれで、テキストも変更できます。
それは次に書こかな。
Google AdS
関連記事
-
『WinSCP』をMacで使えるようにする方法!!
FTPソフトの中では、やはり『WinSCP』が一番使いやすいです。でも、Macでは普通には使えません。。FileZill…
-
RSSフィードを設置してすぐにエラーが…
恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…
-
WindowsのSafariで【background】が効かない時の原因と対処方法
最近cssではショートハンドを使って記述するのが当たり前になってきたので(ショートハンドの詳細はこちら)、今回トラブルと…
-
【2024最新】WordPressのプラグインなしで、OGPの設定をする!Jetpackと共存&Facebook・Twitter Cardsも出力
2024/12 更新 先日、OGPの設定を「WP-OGP」のプラグインを変更して使えるようにしたのですが(詳細…
-
Youtube動画がWordPressで思い通りに表示されない原因と解決方法!レスポンシブ・URLをそのまま表示・横並び配置等
WordPress(ワードプレス)の投稿にYoutubeの動画を表示させたい時、URLをそのまま貼るだけで自動でこんな感…