Comments on: デザインtips – 4．CSSでロールオーバーを作る http://www.isa-school.net/map/shibuya/2009/06/03/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-4%ef%bc%8ecss%e3%81%a7%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/ カラダとココロがアクティブになれる街★渋谷がもっと楽しくなれるBLOG Thu, 09 Feb 2012 12:29:30 +0000 http://wordpress.org/?v=ME2.2.3 By: inoue http://www.isa-school.net/map/shibuya/2009/06/03/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-4%ef%bc%8ecss%e3%81%a7%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/#comment-935 inoue Fri, 03 Jul 2009 11:27:35 +0900 http://www.isa-school.net/map/shibuya/2009/06/03/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-4%ef%bc%8ecss%e3%81%a7%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/#comment-935 にゃむー様のおっしゃるとおりです。 実際はa:link用画像を左上角に、 a:hover用画像を左下角に配置した1枚画像を用意して、 a{ background-image:url1枚画像パス); background-position: left top; background-repeat: no-repeat; } a:hover{ background-image:url1枚画像パス); background-position: left bottom; background-repeat: no-repeat; } とすれば完璧です！ 最初初歩のやり方で掲載させていただきましたがこれだとオーバー用画像が別になっていて1回目の読み込みで若干時間が掛かります。それを理解した上でのステップアップ対処法ですね。 コメントありがとうございました！ にゃむー様のおっしゃるとおりです。

実際はa:link用画像を左上角に、
a:hover用画像を左下角に配置した1枚画像を用意して、

a{
background-image:url1枚画像パス);
background-position: left top;
background-repeat: no-repeat;
}

a:hover{
background-image:url1枚画像パス);
background-position: left bottom;
background-repeat: no-repeat;
}
とすれば完璧です！

最初初歩のやり方で掲載させていただきましたがこれだとオーバー用画像が別になっていて1回目の読み込みで若干時間が掛かります。それを理解した上でのステップアップ対処法ですね。

コメントありがとうございました！

]]> By: 通りすがりのにゃむー http://www.isa-school.net/map/shibuya/2009/06/03/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-4%ef%bc%8ecss%e3%81%a7%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/#comment-934 通りすがりのにゃむー Fri, 03 Jul 2009 01:11:07 +0900 http://www.isa-school.net/map/shibuya/2009/06/03/%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3tips-%e2%80%93-4%ef%bc%8ecss%e3%81%a7%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b/#comment-934 この方法だと、ロールオーバーの時に一瞬ですがチラついてしまうので、実際にはあまり使われていない手法になるかと思います。 a:linkとa:hoverの画像を上下に並べて、background-positionで表示位置を切り替えるとチラつかずに切り替えができると思います。 この方法だと、ロールオーバーの時に一瞬ですがチラついてしまうので、実際にはあまり使われていない手法になるかと思います。
a:linkとa:hoverの画像を上下に並べて、background-positionで表示位置を切り替えるとチラつかずに切り替えができると思います。

]]>