マウスポインタを特定の色の上に合わせると、特定の要素の背景色を、その色に変更する。マウスポインタを特定の色から外すと、元の背景色に戻る。
ロールオーバー・ロールアウトで背景色を変える JavaScript と同様、引数に、背景色を変えたい要素のIDと、背景色を指定し、関数を呼び出す方法。
実装例
- Black
- Purple
- Red
- Blue
- Green
- Orange
- Pink
- Lime
- Aqua
- Yellow
- Beige
マウスポインタを上の色に合わせると、ライトグレーのブロックの背景色を変更する。
マウスポインタを上の色から外すと、元の背景色に戻る。
実装例の動作について
マウスポインタを、「Black」と書かれた黒色の上に合わせると、ライトグレーの背景色が黒色に変わる。マウスポインタを、「Black」と書かれた黒色の上から離すと、元の背景色に戻る。
他の色も同様。
ソースコード
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){
document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){
document . getElementById( id ) . style . backgroundColor = color;
}
// -->
</script>
CSS
<style type="text/css">
<!--
ul#change-background-color {
list-style-type: none;
}
ul#change-background-color li {
float: left;
margin: 0px;
padding: 0px;
width: 50px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
-->
</style>
<!--
ul#change-background-color {
list-style-type: none;
}
ul#change-background-color li {
float: left;
margin: 0px;
padding: 0px;
width: 50px;
text-align: center;
font-size: 10px;
cursor: pointer;
}
-->
</style>
HTML
<div id="cbc" style="background-color:lightgrey;height:150px;">
<ul id="change-background-color">
<li style="background-color:black;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'black' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Black</li>
<li style="background-color:purple;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'purple' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Purple</li>
<li style="background-color:red;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'red' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Red</li>
<li style="background-color:blue;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'blue' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Blue</li>
<li style="background-color:green;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'green' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Green</li>
<li style="background-color:orange;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'orange' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Orange</li>
<li style="background-color:pink;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'pink' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Pink</li>
<li style="background-color:lime;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'lime' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Lime</li>
<li style="background-color:aqua;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'aqua' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Aqua</li>
<li style="background-color:yellow;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'yellow' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Yellow</li>
<li style="background-color:beige;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'beige' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Beige</li>
</ul>
<div style="clear: both; padding: 30px;">
<p>マウスポインタを上の色に合わせると、ライトグレーのブロックの背景色を変更する。</p>
<p>マウスポインタを上の色から外すと、元の背景色に戻る。</p>
</div>
</div>
<ul id="change-background-color">
<li style="background-color:black;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'black' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Black</li>
<li style="background-color:purple;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'purple' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Purple</li>
<li style="background-color:red;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'red' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Red</li>
<li style="background-color:blue;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'blue' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Blue</li>
<li style="background-color:green;color:white;" onMouseOver="changeBackgroundColor( 'cbc', 'green' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Green</li>
<li style="background-color:orange;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'orange' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Orange</li>
<li style="background-color:pink;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'pink' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Pink</li>
<li style="background-color:lime;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'lime' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Lime</li>
<li style="background-color:aqua;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'aqua' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Aqua</li>
<li style="background-color:yellow;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'yellow' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Yellow</li>
<li style="background-color:beige;color:black;" onMouseOver="changeBackgroundColor( 'cbc', 'beige' )" onMouseOut="changeBackgroundColor( 'cbc', 'lightgrey' )">Beige</li>
</ul>
<div style="clear: both; padding: 30px;">
<p>マウスポインタを上の色に合わせると、ライトグレーのブロックの背景色を変更する。</p>
<p>マウスポインタを上の色から外すと、元の背景色に戻る。</p>
</div>
</div>
解説
JavaScript
<script type="text/javascript">
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document . getElementById( id ) . style . backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
<!--
function changeBackgroundColor( id, color ){ // 引数を変数idと変数colorに代入
document . getElementById( id ) . style . backgroundColor = color; // id属性の値が、変数idの値である要素の背景色を変更
}
// -->
</script>
CSS
<style type="text/css">
<!--
ul#change-background-color { /* IDが、change-background-color の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#change-background-color li { /* IDが、change-background-color の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
width: 50px; /* 横幅:50px */
text-align: center; /* テキストの位置:センター */
font-size: 10px; /* 文字サイズ:10px */
cursor: pointer; /* マウスのカーソルの形:ポインタ */
}
-->
</style>
<!--
ul#change-background-color { /* IDが、change-background-color の ul 要素 */
list-style-type: none; /* リストマーカーなし */
}
ul#change-background-color li { /* IDが、change-background-color の ul 要素内の li 要素 */
float: left; /* 右に回り込ませて、横並び */
margin: 0px; /* 外側の余白なし */
padding: 0px; /* 内側の余白なし */
width: 50px; /* 横幅:50px */
text-align: center; /* テキストの位置:センター */
font-size: 10px; /* 文字サイズ:10px */
cursor: pointer; /* マウスのカーソルの形:ポインタ */
}
-->
</style>
HTML
<div id="cbc" style="background-color:元の色を指定;height:150px;"><!--この要素の背景色を変更する-->
<ul id="change-background-color"><!--色の順不同リスト-->
<li style="background-color:変更後の背景色を指定;color:このli要素内の文字色を指定;" onMouseOver="changeBackgroundColor( 'cbc', '変更後の背景色を指定' )" onMouseOut="changeBackgroundColor( 'cbc', '元の背景色を指定' )">変更後の色の名前</li>
・
・
・
</ul>
<div style="clear: both; padding: 30px;">
<p>マウスポインタを上の色に合わせると、ライトグレーのブロックの背景色を変更する。</p>
<p>マウスポインタを上の色から外すと、元の背景色に戻る。</p>
</div>
</div>
<ul id="change-background-color"><!--色の順不同リスト-->
<li style="background-color:変更後の背景色を指定;color:このli要素内の文字色を指定;" onMouseOver="changeBackgroundColor( 'cbc', '変更後の背景色を指定' )" onMouseOut="changeBackgroundColor( 'cbc', '元の背景色を指定' )">変更後の色の名前</li>
・
・
・
</ul>
<div style="clear: both; padding: 30px;">
<p>マウスポインタを上の色に合わせると、ライトグレーのブロックの背景色を変更する。</p>
<p>マウスポインタを上の色から外すと、元の背景色に戻る。</p>
</div>
</div>
元の背景色、変更後の背景色ともに、「 red 」のようなカラーネームでも、「 #ff0000 」のようなカラーコードでも、どちらでも指定可能。
onMouseOver="changeBackgroundColor()"
イベント属性の onMouseOver で、JavaScript の changeBackgroundColor() を呼び出している。
onMouseOut="changeBackgroundColor()"
イベント属性の onMouseOut で、JavaScript の changeBackgroundColor() を呼び出している。
changeBackgroundColor()
changeBackgroundColor()の引数は、（ 背景色を変える要素のID, 背景色 ）となっている。