ページの先頭です

ヘッダーの始まりです




本文の始まりです

HTML+CSSリファレンス

サポートサイトTOP

この下の画像のように、マウスのカーソルを当てたときに画像や色が変化するボタンを見かけたことはありませんか?

このようにカーソルを合わせた画像が変わることを”マウスオーバー”と言い、リンクであることを知らせる視覚効果があります。
ネットショップでは、クリックを促すようなボタンで多く使用されます。
上記のようなボタンの場合、あらかじめ2つの画像を用意しておきます。

onmouseoverはポインタが画像に触れたとき、onmouseoutは画像から離したときの動作、thisは「このイベントが発生した場所」を意味します。
つまり、onmouseoverという記述部分は「ポインタが画像に触れたとき、この場所の画像を指定した画像に置き換える」という意味となります。
それぞれの動きに応じた設定箇所に画像のURLを指定することで、マウスの動きで画像を切り替えることができるようになります。

EC-コンサル 無料お問い合わせはこちら

この記事を見た人は、こんなページも見ています

関連情報

用途でリファレンスを探す

キーワードでリファレンスを探す

キーワードを入力

先頭へ戻る

本文の終わりです