拡大する の調整

★　記事内に記載した画像にカーソルを載せるとが表示されます。
この画像を調整します。


◆　参考：拡大するの画像は、横 58px 縦 27pxとなっています。



◆　拡大するの画像を変える

①　利用した画像は下記（横　135px 縦　87px)




下記サイトさまを利用させていただきました
http://www.mikokt.com/coments.htm




②　ＣＳＳへ下記を追記する。

/* ------------------------------------------------------- */
/* 拡大するの噴出し画像を変更する　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#naviLink img{/* 拡大するの画像 */
visibility:hidden;/* 表示しない */
}
#naviLink{/* 拡大するの画像エリア */
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
width:135px;/* 画像の横幅 */
height:87px;/* 画像の縦 */
margin-left:35px;/* 左右へ位置を調整 */
margin-top:-5px;/* 上下の位置を調整 */
}

　注意

　width height は画像の横と縦のpxを指定します。
　　　画像より大きい値を指定すると点滅してしまいます。

　margin-left と　margin-top　で画像の表示位置を調整します。

◆　拡大するの噴出しを消す

①　下記をＣＳＳへ追記する

/* ------------------------------------------------------- */
/* 拡大するの噴出し画像を消す　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
#naviLink img{
display:none;
}

◆　拡大するが表示されるのは、記事内の画像で、記事編集ページで画像ボタンを
クリックして記事に貼り付けた画像に限ります。

●　ランダムに画像を変えたい場合

①　フリープラグインへ追記

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
imagex = new Array();
imagex[0]='画像のＵＲＬ①';
imagex[1]='画像のＵＲＬ②';
imagex[2]='画像のＵＲＬ③';
imagex[3]='画像のＵＲＬ④';
imagex[4]='画像のＵＲＬ⑤';
$(function(){
$("a.detailOn").mouseover(function(){
x=Math.floor(Math.random()*imagex.length);
$('#naviLink').css("background-image","url("+imagex[x]+")");
})})
</script>

　注意

　画像のＵＲＬ①～⑤で画像のＵＲＬ指定しない行は消してください
　下記はフリープラグインの最初に１つあればＯＫです

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

●　実例