- 2009年6月24日 18:20
- HTML＋CSS
ウェブサイトのデザインやコーディングをしていてよくやるのが「グローバルナビゲーション」を画像にして、onMouseすると画像が切り替わるってやつです。
backgroundで画像を指定するんですが、フツウにonMouse前と後の画像をそれぞれ用意して指定すると、onMouseした時にこう「チカッ」と一瞬消えるの。アレ、地味なんだけど結構気になる。
原因は、onMouseした時に画像を読み込み始めるのでそのタイムロス？でチカッとなる。みたい。
ということで、チカッとしない方法。
結構既にもうやっている人多いんだけど、自分めも用な感じで！
まず、onMouseする画像はこんな感じにつくります。onMouse前と後の画像をピッタリ上下くっつけて一つの画像にします。ココではわかりやすい様に"縦100px横250px"です。ちなみに一つ分は"縦50px横250px"です。
まずはサンプルページ。
以下ソースの簡単な解説。
a{
display: block;
width: 250px;
height: 50px;
background: url(sample_logo.gif) no-repeat top left;
text-indent: -400000px;
}
まずはaタグをinline要素からblock要素に。これで縦横指定が効いたりします。
そして、くっつける前の一つ分の画像のサイズを縦横指定（この場合は"縦50px横250px"）。
backgroundで画像を読み込み、text-indentをマイナス指定して、とんでもなく左方向へ吹っ飛んでいただきます。
これで下準備はOK！次は:hoverした時の画像切り替えです。
a:hover{
background-position: 0 -50px;
}
先にaタグに必要な指示（blockとか）はしたので、後はbackground-positionでonMouse時にずらすだけです。
この場合はonMouse前と後の画像が縦に並んでいるので、縦方向だけにズラしたいです。のでので！横方向は0を指定。縦方向は上にズラしたいので、マイナス画像の高さ分の数値を指定して上げます。
この場合は、一つの表示領域が高さ50pxなので、-50pxを指定してます。
これで、大丈夫なんじゃないでしょうか。。。
- Newer: くいしんぼっと と言うTwitter bot を作ってみました
- Older: fixedをつかった2カラムレイアウトとの戦い
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://www.volute.org/mt/mt-tb.cgi/3
- Listed below are links to weblogs that reference
- CSSを使ったonMouseの画像きりかえとか from volute.org