【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。Tags【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。ONZEhttps://on-ze.com/archives/1516HomeBlog【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。GoogleJavaScriptを使った初歩的なテクニック。マウスオーバーした際に画像を切り替える方法を紹介します。mouse]属性です。今回は[onmouseover]と[onmouseout]を使い、それぞれ、画像にマウスカーソルが乗ったとき(マウスオーバー)と画像からポインタが離れたとき(マウスアウト)の動作を指定していきます。具体的な例としてサンプルのコードを書いてみましょう。/></a>コードの中の[this]は、「イベントが発生した場所」を意味します。「onmouseover="this.src='images/sample-02.png'"」という記述なら「ロールオーバーした際に、この場所の画像を『sample-02.png』に置き換える」という意味となります。[onmouseover]の指定だけだと元の画像に戻らないので、忘れずに[onmouseout]を記述しておくことが重要なポイントです。[onmouseover]属性を指定したら、必ずonmouseout属性もセットで指定しましょう。onmouse属性のメリットonmouse属性を使ったロールオーバーが他の方法と違う点は、inputタグなど、通常ではロールオーバーが難しいタグに対してもロールオーバーが適用できるという点です。タイプが画像のinputタグをロールオーバーさせる場合は以下のように記述します。/>通常の画像に指定するケースとほぼ同じなので簡単ですね。onmouse属性のデメリットこの方法を使うデメリットとしては、JavaScriptを用いた方法なので、閲覧者側のブラウザでJavaScriptをサポートしていない場合や、任意でJavaScriptの動作を止めている場合は正しく機能しません。onmouse属性を使った簡単なロールオーバーの作り方。