横メニューにカーソルを乗せた場合にヘッダー画像を変化させる

★　横メニューにカーソルを乗せた場合にヘッダー画像を変化させる



　以下はすべて、.skinHeaderArea にヘッダー画像を設置したケースです。
.skinBlogHeadingGroupArea にヘッダー画像を設置している場合は、
全部、.skinHeaderArea → .skinBlogHeadingGroupArea置き換えてください。







●　個別で横メニューを設置するケース。


◆　当ケースの横メニューの設置は、下記を参照してください。

http://ameblo.jp/new-bulue9/entry-10727818816.html




　注意 メニューの項目を横にカーソルを移動していくと、ヘッダーの変化の
　　反応が悪いので注意してください。



①　ＣＳＳへ追記　各pxは調整してください。

/* ------------------------------------------------------- */
/* 横ナビゲーション（個別）　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinFrame2{/* ウインドウの大きさを変えても位置を変化させない */
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
.skinHeaderArea{
background-image:url(画像のＵＲＬ①);
background-repeat:no-repeat;
height:600px;
}
skinHeaderArea{
margin-bottom:30px;
}
#navi01,#navi02,#navi03,#navi04,#navi05{
position:absolute;
top:634px;
width:190px;
background-color:#444444;
font-size:18px;/* 文字の大きさ */
text-align:center;
border:1px solid #FF0000;/* 枠 */
display:block;
z-index: 100;
}
#navi01 a:hover,#navi02 a:hover,#navi03 a:hover,#navi04 a:hover,#navi05 a:hover{
background-color:#0000ff;
}
#navi01{left:0px;}
#navi02{left:200px;}
#navi03{left:400px;}
#navi04{left:600px;}
#navi05{left:800px;}

②　フリープラグインへ追記
　　画像のＵＲＬ①～⑤　は、それぞれカーソルを乗せたときの画像
　　画像のＵＲＬ①は、上記①のＣＳＳの画像のと同じにする

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#navi01").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ①)");
});
$("#navi02").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ②)");
});
$("#navi03").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ③)");
});
$("#navi04").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ④)");
});
$("#navi05").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ⑤)");
});
});
</script>

　下記は、フリープラグインの最初に１つあればＯＫです。（以下、同じ）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>



③　フリースペース又はフリープラグインへ入れる
　　アメーバＩＤは自分のＩＤに変えて下さい。
　　下記は、あくまで例です。

<div id="navi01"><a href="http://profile.ameba.jp/アメーバＩＤ">部屋</a></div>
<div id="navi02"><a href="http://ameblo.jp/アメーバＩＤ/entry-xxxxxxxx.html">飛行</a></div>
<div id="navi03"><a href="http://ameblo.jp/アメーバＩＤ/entry-xxxxxxxx.html">規約</a></div>
<div id="navi04"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメーバＩＤ">手紙</a></div>
<div id="navi05"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=アメーバＩＤ">贈物</a></div>

●　横メニューナビの自動作成を利用したケース

◆　私のブログの横メニュー（ＣＳＳ自動作成）を使用した場合。
http://ameblo.jp/new-blue-777/entry-11150022888.html

①　ＣＳＳは変える必要はありません。


②　フリープラグインへ下記を追記（画像のＵＲＬは変更して下さい）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#Topnavi li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ①)");
});
$("#Topnavi li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ②)");
});
$("#Topnavi li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ③)");
});
$("#Topnavi li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ④)");
});
$("#Topnavi li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ⑤)");
});
});
</script>

③　フリースペースは変える必要はありません。












●　topmenu のケース

◆　アメブロで良く使われている topmenu の横メニューナビの場合


①　ＣＳＳは変える必要はありません。

②　フリープラグインへ下記を追記（画像のＵＲＬは変更して下さい）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#topmenu li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ①)");
});
$("#topmenu li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ②)");
});
$("#topmenu li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ③)");
});
$("#topmenu li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ④)");
});
$("#topmenu li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のＵＲＬ⑤)");
});
});
</script>

③　フリースペースは変える必要はありません。