CSSで質問です。

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/02/27 15:05:37
  • 終了:2007/03/06 15:10:02

回答(1件)

id:heppokoA No.1

heppokoA回答回数65ベストアンサー獲得回数72007/02/27 15:28:48

ポイント60pt

アイコン画像を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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません