トップページ > 便利な小技 > スワップイメージメニュー

CSSレイアウト[便利な小技]

スワップイメージメニュー

スワップイメージするメニューは、CSSと、簡単なJavaScriptを組み合わせて作る。
ボタンにロールオーバーした時、CSSの「background-position:」の値をJavaScriptで変更することで、画像が変化して見える。

スワップイメージメニューの作り方［1］メニューセットと画像のボックスを作る

図説 4つのメニューボタン（ここでは#sample .mainmenu h4の#menu1〜#menu4）は、まとめてボックスで囲んでおく（ここでは.mainmenu）。

画像を変えたいボックスにIDを指定する（ここでは#swapimg）。このボックスは天地左右を指定する（写真の見える範囲を限定する）。
使用した画像は右のように、5つの画像をひとまとめにしたもの。複数の画像を1つにまとめるのがミソ。
ボックス#swapimgにはまずは「background-position:0px 0px」で、一番上の眠り猫の写真を指定しておく。
この「background-position」のY軸の値を変えることで、ボックス#swapimgの背景画像を変化させていく。

下記はCSSの抜粋。
#sample { width: 400px; }
#sample .mainmenu { width:400px; margin-bottom: 8px; }
/*menu*/
#sample .mainmenu h4 { float: left; }
#sample .mainmenu h4 a { height: 25px; width: 100px; text-indent: -9999px; display: block; }

#sample .mainmenu h4#menu1 a { 略 }
略（メニューボタン#menu2〜#menu4の通常時の画像を指定していく） #sample .mainmenu h4#menu1 a:hover { 略 }
略（メニューボタン#menu2〜#menu4のロールオーバー時の画像を指定していく）
/*img*/
#swapimg{ height: 75px; width: 400px;
background: url(../img/swapimg.jpg) no-repeat 0px 0px;}
CSS_Layout/kowaza/css/kwz4.css
スワップイメージメニューの作り方［2］JavaScriptを書く

メニューへのロールオーバー、ロールアウトの指定に、JavaScriptを使う。

外部JavaScript書類は以下の通り。
/*mainmenu script*/
function mouseOut() {
document.getElementById('swapimg').style.backgroundPosition='0px 0px';
}
/*each menu script*/
function mOver1() {
document.getElementById('swapimg').style.backgroundPosition='0px -75px';
}
function mOver2() {
document.getElementById('swapimg').style.backgroundPosition='0px -150px';
}
function mOver3() {
document.getElementById('swapimg').style.backgroundPosition='0px -225px';
}
function mOver4() {
document.getElementById('swapimg').style.backgroundPosition='0px -300px';
}

いちばん上の「mouseOut」は初期値の眠り猫の画像。
「mOver1」から「mOver4」は、それぞれ画像のY軸を75ピクセルずつ変化させている。

HTMLをスッキリさせるために 外部JavaScript書類を作り、HTMLの<head>部にリンクさせる。リンクのタグは以下の通り。
<head>
<script type="text/javascript" src="../js/swapimg.js"> </script>
</head>
スワップイメージメニューの作り方［3］HTML上でJavaScriptのファンクションを指定
HTMLは下記の通り。
<div id="sample">
<div class="mainmenu" onMouseOut=mouseOut();>
<h4 id="menu1"><a href="#" onMouseOver=mOver1();>NEWS</a></h4>
<h4 id="menu2"><a href="#" onMouseOver=mOver2();>SHOP</a></h4>
<h4 id="menu3"><a href="#" onMouseOver=mOver3();>STAFF</a></h4>
<h4 id="menu4"><a href="#" onMouseOver=mOver4();>ACCESS</a></h4>
<div class="c-both"></div>
</div><!-- END mainmenu-->
<div id="swapimg"></div> ←これが画像のボックス
</div><!-- END sample-->
4つのボタン全部を囲んだ「mainmenu」ボックスに対して、ロールアウトで初期値の眠り猫の画像に戻るように指定している。
各ボタンにはそれぞれ別の画像が表示されるようにファンクションをあてている。
ページの最上部へ