クリームログmenuAboutLINKContactMacDesignWebWordPressLifehackBlogホームページ制作、Webサービス、デザイン、ライフハックなど気になる情報を発信HomeWebonmouse属性使用で簡単・お手軽なロールオーバーレシピonmouse属性使用で簡単・お手軽なロールオーバーレシピ2013.05.01WebjavascriptTweetShareHatena手軽にロールオーバーを実装するいつもならナビゲーション周りは、定番の外部ファイルからのスクリプトでササッと処理しています。バナーなどのいわゆる「ロールオーバー」させる時も同じです。昨日、仕様に無かったはずのソレが急遽必要になり、応急措置として利用してみました。今回、”onmouse属性”っていうものを改めて知りました。このロールオーバーの方法って、まだいろいろとあるみたいで、調べてみてナルホドな結果が得られて満足です。以下がそのコードです。/></a>「onmouseover」と「onmouseout」がそれぞれ、ロールオーバーしたときに、画像からポインタを離した時の動作を意味しています。「このイベントが発生した場所」を意味しています。『ロールオーバーした際に、この場所の画像をbanner_over.jpgに置き換えますよ~』という意味になります。このonmouseover属性を使ったロールオーバーが他と違うポイントは、通常ではロールオーバーが難しいタグに対して(例えば「input」タグ)、それが適用出来る点です。/>おぉ~、シンプルです。(゚∀゚)注意しなければならいこと。onmouseover属性を指定したら、必ずonmouseout属性もセットで指定すること。しなければ、画像からポインタを離した時の画像が未指定のため、非表示となります。デメリットもあります。Javascriptを用いているので、閲覧者サイドのブラウザでJavascriptをサポートしていない場合や、任意でJavascriptの動作をストップしている場合は正しく機能しません。(最近ではあまりこのようなケースは無いよう感じられますが・・・)ロールオーバー方法も、1つだけではなく何個か手法を使い分けられるようになると、表現に幅が出てきて、効率よくプロジェクトを進行させていけると思います。Note普段使用しているラップトップが調子が悪い。Macを購入する絶好のタイミングなのに、6月にどうやら新作の発表があるとのこと。環境を整えていく予定ではあるため、先にWin機を購入しようかと検討中。BTOのハイスペックなヤツにしたる。