オンマウスやクリックで画像を切り替える（ロールオーバー）、ずらす - HTML/CSS｜ブログカスタマイズ｜SOLID DAYS BLOG
画像の上にポインタを乗っける（マウスオーバー、オンマウス）とその画像が切り替わり、さらにクリックするとまた画像が変わる。 そんなインタラクティブな動きを、JavaScirptを使わずHTMLとスタイルシートCSSだけで実現することが出来ます。 ボタンみたいで、文字やただの画像でのリンクとは一味違った感じが出せます。 今回紹介するCSSは、横に並んだトップコンテンツなどを作るのに適しています。 まずその仕組みを簡単に説明します。 画像を切り替えるには、最低でも2枚の画像が必要です。 今回紹介する方法では、通常時、マウスオーバー時、クリック時の3つの画像が必要になります。 では、3枚の画像をそれぞれアップロードすればいいのでしょうか。 しかしその方法では、上のように4つ並べると、3×4=12枚もの画像を用意してアップロードしなくてはいけません。 それは面倒なことだし、3枚の画像がそれぞれ違う場
CSSでマウスオーバー時のボタン画像を切り替える：Ultimate Interface：So-netブログ
マウスオーバー時の画像切り替えのアクションは、CSSが主流になる前まではjavascript等で実現していたのですが、 最近はほとんどCSSで切り替えるテクニックが使われているように思います。 代表的な例が、text-indent にマイナス値を入れてテキストをどっかに飛ばし（隠し）、 background にオンとオフをひとまとめにしたボタン画像を埋め込み、:hover でスライドさせるテク。 Dave Woods - HTML, CSS, Web Design - [サンプル] 実装が簡単なうえ、オンとオフ２つのボタンが一つの画像ファイルになっているのでサーバへのアクセス負荷軽減等のメリットがあります。 じゃあ、デメリットは？ ブラウザ設定で画像を非表示にした状態で見ると、画像どころかテキストさえも表示されません。 もしこれがサイトにおける重要なメニューだとしたら、最悪です。 代替方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MouseOver Images Using CSS Sprites - Dave Woods Freelance Web Designer UK
