タグ

2012年4月22日のブックマーク (1件)

  • ロールオーバー画像の実現方法

    今回は「ロールオーバー画像の実現方法」についてお話します。 ロールオーバー画像は、 グローバルナビ、サイドメニューなどの ボタンリンクによく使用されています。 ホームページをコーディングする際には 決して避けては通れない、 不可欠な技術と言えます。 JavaScriptなどで実現する方法もありますが、 cssプログですので、 もちろんcssによる実現方法を ご紹介します。 私からは ・直接画像を置く方法 ・テキストの置き換えを使った方法 の2パターンご紹介します。 直接画像を置く方法 ボタン画像をdivなどで囲み そのボタン画像を囲んだdivの背景に ロールオーバー時の画像を設定します。 わかりにくいですが、ボタンを囲んだものの背景に ロールオーバー時の画像を設定することで ボタンの下に、ロールオーバー時の画像が 隠れている状態です。 そして、ボタンをマウスオーバーした際に、 ボタンの表示

    ロールオーバー画像の実現方法