人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSで質問です。
下記のプロパティを使い、デザイン面でこんな工夫をしている、こんな用途で使っているという事がありましたら、お答えいただけますでしょうか?

・背景関係
・margin
・padding
・border
・レイアウト
・リスト・マーカー
・TABLE

●質問者: makocan
●カテゴリ:インターネット ウェブ制作
✍キーワード:border CSS margin padding デザイン
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● heppokoA
●60ポイント

アイコン画像をOffとOnの2種類用意しておいて,

a.foo:link,
a.foo:visited {
 color:#000066;
 text-decoration:none;
 background-image:url('Off.gif');
 background-position:0px 2px;
 background-repeat:no-repeat;
 padding-left:18px;
}
a.foo:hover {
 color:#003399;
 background-image:url('On.gif');
}

のようにすると,リンクを張ったテキストに,hover時アイコンが変わる効果をつけることができます。

なのですが,これだと初回のhover時にOn.gifを読み込む時間がかかるということだと思うのですが,On.gifとOff.gif2種類用意するのではなくて,縦か横に十分長い1枚のアイコン用画像を作っておいて,

こんな感じの画像↓ (**はOff時のアイコンで,@@がOn時のアイコン。後の部分はブランクにするか,周りの背景にあわせておく。)
+-------------------------------------+
|** @@ |
+-------------------------------------+

hover時とそうでないときとでbackground-positionの数字を変えてアイコンが変わったように見せるというのを愛・地球博の公式サイトでやっていました。

http://dummy

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ