CSS タイトル画像のロールオーバー2
前回 の続きです・・・・ 実際の見本ブログはココ
普段の画像とマウスが乗った時の画像を用意して・・・・
それをくっつけて１枚の画像にしてしまいます
縦にくっつけていますが横でもかまいません
２枚の画像はそれぞれ同じサイズにしてください
この方法のメリット・・・・
最初の時点で画像が読み込まれていますので
マウスをのせたときの反応が早くなります
↓縦にくっつけて１枚の画像になったタイトル画像
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header{
height:420px;/*画像の縦*/
}
#header h1 a{
width:760px;
height:420px;
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
background-image: url(画像のURL);
background-repeat:no-repeat;
}
#header h1 a:hover{
background-position: 0 -420px;
}
aタグの背景に画像を配置します
実際の画像のサイズは横760px縦840pxですが・・・
width:760px;
height:420px;
と、なっていますので上から420px分しか表示されません
つまり上半分・・・普段の画像しか表示されないわけです
マウスがのったとき・・・・
#header h1 a:hover で、background-position:0px -420px;となっています
マウスがのったら背景のポジションを横には動かさないで縦を-420px動かしなさい・・・・
縦に-420px動かすと・・・・
下にくっつけた画像が現れます
height:420px;と表示する高さは420pxですから
結果、下にくっつけた画像だけが表示されるわけです
※基準は画像の左上の角です
また画像を横につなげた場合は・・・
#header h1 a:hover{
background-position: -760px 0;
}
この方法は・・・・
「読者になるボタン」や「読者になるボタン」ボタンのロールオーバーでも利用可能です
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
width:150px;
height:80px;
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#readerList dl a:hover {
background-position: 0 -80px;
}
/* ブログを作るボタンロールオーバー */
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
width:150px;
height:80px;
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#ameblo a#btn_blog:hover {
background-position: 0 -80px;
}
こんなんです↓
ちなみに・・・・何セットも作らなくても・・・・・
↓１枚の画像だけでタイトル、読者になるボタン、読者になるボタン のロールオーバーも可能です
・・・・・つづく
出来ますが・・・・ここまでしなくても・・・・するメリットもないしね・・・・・
でも一応、つづく・・・予定？