ロールオーバー 文字や下線、背景など
マウスが上に来た時に、文字や下線や背景などを変化させロールオーバー効果の様々なパターンです。
ボタンの様に全体に画像を使用したい場合には、
別々の画像を切り替える
１枚の画像を移動させる
全てのボタンを１枚の画像にして移動させる
をそれぞれ参考にして下さい。
ここでは、javaを使用しない方法になります。
また、リンク文字の色変更の仕方などは、文字の色を変えたい（リンク部分）で説明してますので確認して下さい。
画像を使用しないパターン
一部に画像を使用するパターン
リンクした文字の下線をなくし、マウスが来た時に全体の文字を赤色に変更し、下線も表示する方法です。
もっとも多くのサイトで使用されていて、マウスが重なった場合に変化させるhoverを使用します。
文字の色を変えたい（リンク部分）、マウスが来た時に再度下線を表示するも参照して下さい。
<div><a href="リンク">ロールオーバー（文字）</a></div>
/* リンク部分 */
a
{text-decoration:none;} /* リンク部分の下線を消す */
a:link
{color:#0000ff;} /* まだ見ていないリンク色 */
a:visited
{color:#0000ff;} /* 既に見たリンク色 */
a:hover
{
color:#ff0000; /* マウスが上に来た時の文字色設定 */
text-decoration:underline; /* マウスが上に来た時に下線をだす。 */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
ボタンのイメージになる様に、『ロールオーバー１』の場合には、『下と右』の罫線を濃い色で『影』の様に見える様にし、マウスが上に来た時は『凹んだ感じ』になる様に、『左と上』が『影』になる様にする方法です。
ただ単に、罫線の引き方を反転しているだけの事ですが、『左と上』の罫線の太さ（２ｐｘ）と、『右と下』の罫線の太さ（１ｐｘ）が違う為に、反転した時に中の文字部分が動きます。（全てのブラウザに対応しているかは不明です。）
『ロールオーバー１（凹）』についての書き方です。
<div><a href="リンク">ロールオーバー１（凹）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
border-left:solid 1px #cccccc; /* 左罫線 */
border-top:solid 1px #cccccc; /* 上罫線 */
border-right:solid 2px #808080; /* 右罫線 */
border-bottom:solid 2px #808080; /* 下罫線 */
background-color:#c0c0c0; /* 背景色 */
}
a:link
{color:#000000;} /* まだ見ていないリンク色 */
a:visited
{color:#000000;} /* 既に見たリンク色 */
a:hover
{
border-left:solid 2px #808080; /* 左罫線 */
border-top:solid 2px #808080; /* 上罫線 */
border-right:solid 1px #cccccc; /* 右罫線 */
border-bottom:solid 1px #cccccc;/* 下罫線 */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
最初から引いてある罫線（枠線）が、マウスが来た時に変化する方法です。
単に罫線の『種類』,『色』を変更しているだけの事ですが、罫線の『太さ』を変更してしまうと、全体のレイアウトが崩れる可能性がありますので太さを変更する事はしない様にします。
『ロールオーバー４（二重線）』の様に『罫線が現れる！』様にする場合には、必ず『背景色と同色線』を引いておいて、マウスが来た時に『色や、種類』を変更する様にします。最初に引いておかないとマウスが来た時に急にレイアウトが崩れる原因になります。
『ロールオーバー４（二重線）』についての書き方です。
<div><a href="リンク">ロールオーバー４（二重線）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
border:solid 3px #c0c0c0; /* 罫線を実線の3pxで引く（背景と同色） */
background-color:#c0c0c0; /* 背景色 */
}
a:link
{color:#000000;} /* まだ見ていないリンク色 */
a:visited
{color:#000000;} /* 既に見たリンク色 */
a:hover
{border:double 3px #000000;} /* 罫線を二重線の3pxで色を黒に*/
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
文字の『色』と『太さ』を変更する方法です。
マウスが重なった時に文字色を変更し、文字の太さも太くして変化させてます。
<div><a href="リンク">ロールオーバー５（太文字）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
border:solid 1px #000000; /* 全体罫線 */
background-color:#ff6600; /* 背景色 */
}
a:link
{color:#000000;} /* まだ見ていないリンク色 */
a:visited
{color:#000000;} /* 既に見たリンク色 */
a:hover
{
color:#ffffff; /* 文字色 */
font-weight:bold; /* 文字を太く */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
『文字の色』と『背景色』を変更し、反転している様にする方法です。
マウスが重なった時に文字・背景色を変更し、文字の太さも太くして変化させてます。
枠線を最初から引いておく事がポイントです。
<div><a href="リンク">ロールオーバー６（反転）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
border:solid 2px #ff6600; /* 全体罫線 */
background-color:#ff6600; /* 背景色 */
color:#ffffff; /* 文字色 */
font-weight:bold; /* 文字を太く */
}
a:link
{color:#ffffff;} /* まだ見ていないリンク色 */
a:visited
{color:#ffffff;} /* 既に見たリンク色 */
a:hover
{
color:#ff6600; /* 文字色を反転 */
background-color:#ffffff; /* 背景色を反転 */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
一部の枠線の色を変化させる方法です。
『下線』の場合は、下線の色を『白』→『緑』,『左右の線』の場合は、『緑』→『赤』に変化させています。
『ロールオーバー８（左右の線）』についての書き方です。
<div><a href="リンク">ロールオーバー８（左右の線）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
border-left:solid 10px #009933; /* 左の罫線 */
border-right:solid 10px #009933; /* 右の罫線 */
border-bottom:solid 1px #009933; /* 下の罫線 */
border-top:solid 1px #009933; /* 上の罫線 */
background-color:#ffffff; /* 背景色 */
font-weight:bold; /* 文字を太く */
}
a:link
{color:#009933;} /* まだ見ていないリンク色 */
a:visited
{color:#009933;} /* 既に見たリンク色 */
a:hover
{
border-left:solid 10px #ff0000; /* 左の罫線 */
border-right:solid 10px #ff0000; /* 左の罫線 */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
左側の画像を入れ替える方法です。
この
, 
画像自体を背景として設定をし、マウスが上に来た時に、この
, 
背景画像に変える方法です。
画像の場所を指定するには、background-position:左右 上下;を使用して表示位置を指定しています。
『ロールオーバー１１（左の画像）』についての書き方です。
<div><a href="リンク">ロールオーバー１１（左の画像）</a></div>
/* 全体 */
div
{
width:300px; /* 全体幅 */
height:24px; /* 全体高さ */
text-align:center; /* 文字を中央 */
line-height:150%; /* 行の高さ */
}
/* リンク部分 */
a
{
display:block; /* リンクをブロックに変換 */
width:100%; /* リンク幅をブロック全体に */
height:100%; /* リンク高さをブロック全体に */
text-decoration:none; /* リンク部分の下線を消す */
font-weight:bold; /* 文字を太く */
text-align:left; /* 文字を左寄せ */
text-indent:20px; /* 文字の前の余白 */
border-bottom:solid 3px #009933; /* 下の罫線 */
background-color:#ffffff; /* 背景色 */
background-image:url(画像１); /* 最初の背景画像 */
background-repeat:no-repeat; /* 背景画像を繰返さない */
background-position:left center; /* 背景画像の表示場所 */
}
a:link
{color:#000000;} /* まだ見ていないリンク色 */
a:visited
{color:#000000;} /* 既に見たリンク色 */
a:hover
{
background-image:url(画像２); /* 変更の背景画像 */
background-repeat:no-repeat; /* 背景画像を繰返さない */
background-position:left center;/* 背景画像の表示場所 */
}
ホームページ作成ＴＯＰ > マウスで変化 > 文字や下線や背景などいろいろ > このページのＴＯＰ ▲
