CSS タイトル画像のロールオーバー3
今回はまったくのお遊びです 役に立つかは・・・・？
メリットは・・・・ナイです！
一応・・・こんなんも出来ますよ・・・って頭の片隅にでも・・・・
・・・・あっ、最後はまじめです・・・
１枚のメニュ画像とCSSで・・・・
ホームページとか作る方には役に立ちます
と、言うことで・・・・
こんなメチャクチャな１枚の画像とCSSでロールオーバーをやってみます
div#header h1 {
margin:0 0 0 50px;
padding:0;
}
div#header h1 a {
display:block;
width:205px; /* タイトル画像の横幅 */
height:62px; /* タイトル画像の縦 */
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-repeat : no-repeat;
background-position:-16px -35px;
text-indent: -2000px;
overflow: hidden;
outline-style:none;
}
div#header h1 a:hover {
background-position:-285px -124px;
}
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
display: block;
width:152px;/* 画像の横幅 */
height:30px;/* 画像の縦 */
background-repeat : no-repeat ;
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-position:-5px -150px;
}
#readerList dl a:hover {
background-position:-417px -24px;
}
/* ブログを作るボタンロールオーバー */
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
display: block;
width:152px;/* 画像の横幅 */
height:30px;/* 画像の縦 */
background-repeat : no-repeat ;
background-image : url(http://stat.ameba.jp/user_images/4a/65/10082469625.jpg );
background-position:-115px -110px;
}
#ameblo a#btn_blog:hover {
background-position:-236px -10px;
}
わざわざこんな無茶なことやる方はおられないと思いますのでさらっと・・・・・・
↓実際に上の画像を使ってやってみました マウスをのっけてみてください
ここからはまじめに・・・・？
上を応用すれば下のような１枚の画像とCSSでホームページのメニュが作れます・・・・
緑の文字は現在のページを、マウスをのせると紫に文字色が変ります ・・のように使います