商品の詳細ミニイメージをメインイメージと入れ替えて拡大して見せるロールオーバー
よくわけが分からないタイトルになってしまったけど。
ECの商品の詳細ページで、メインの画像が1つあって、その他に詳細画像が3つあり、それらをマウスオーバーでメイン画像と入れ替えて大きく表示できるようにしたいとき使う。
【JavaScriptのソース】
「imagechange.js」（名前はなんでもいい）と名前をつけて、保存。
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
【HTMLのソース】
１）JavaScriptへのリンクを<head></head>に入れるか、<body></body>の一番上に入れる。
<script type=”text/JavaScript” src=”【JSへのパス/】imagechange.js”></script>
もしも、JavaScriptを別ファイルで保存することが出来ない場合は、
<script language=”JavaScript” type=”text/JavaScript”>【この間に上記のソースを入れる】</script>
として、同じようにロールオーバーを使用するページのHTMLの<head></head>に入れるか、<body></body>の一番上に入れる。
２）商品の詳細画像を並べるコードを利用したいところへ入れる。
<!– 商品メイン画像 –>
<img src=”<【メインイメージへのパス】>” class=”mainimg” name=”mainimg” />
<!–// 商品メイン画像 –>
<!– 商品詳細画像 –>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【1つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【1つ目の小さい画像へのパス】” alt=”詳細イメージ１” name=”img_s01″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【２つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【２つ目の小さい画像へのパス】” alt=”詳細イメージ２” name=”img_s02″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【３つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【３つ目の小さい画像へのパス】” alt=”詳細イメージ３” name=”img_s03″ /></a>
<!–// 商品詳細画像※3つ以上増やしたい場合は、<a></a>までを1組コピーして番号を変えればOK –>
作成したJavaScriptと画像ファイルを、コードで指定したディレクトリへFTPでアップロードする。
カラーミーショップなどのASPでは、商品の画像パスなどは、商品登録するときに自動的に生成されるため、パスを指定する際に、その画像やリンク箇所へのパスを変数で取得する必要がある。
また、テンプレートに制限があったり、FTPが使えなかったり、などで、JSを別ファイルにできないこともある。
以下、カラーミーショップの設置例。
管理メニューの『お店をつくる』→『デザイン設定をする』から、テンプレートを選び、『デザイン設定』ボタンをクリック。
１）1番目の共通テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
HTMLコードの一番上に、
<script language=”JavaScript” type=”text/JavaScript”>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
を追加し、『更新」ボタンを押して、保存。
２）4番目の商品詳細テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
メイン画像とオプション画像のコードをロールオーバー用に書き換える。
例えば、プレーンの場合であれば、L13からL28までを下記のように変更して『更新』。
<div style=”margin-bottom:10px;”>
<{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
</div><!– 商品画像その他 –>
<div>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１” name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２” name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３” name=”img_s03″ /></a><{/if}>
</div>
例２。
その他、下記のようにDIVタグやSPANタグのクラスを使ってマーキングしておくと、画像の並びや背景のデザインをCSSで調整できる。
<div class=”detail_img clearFix”>
<!– 商品メイン画像 –>
<{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
<!–// 商品メイン画像 –>
<{if $product.ot1_url != “”}>
<div class=”smallimg”>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１” name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２” name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,'<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３” name=”img_s03″ /></a><{/if}>
</div>
<span class=”checkred”>＊マウスを重ねると拡大します。</span>
<{/if}>
</div>
大体こんな感じで。もし、マウスアウトしたときに、自動的に元の画像に戻って欲しくない場合は、onmauseoutの記述部分を削除すれば、OK。（onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” ←この部分。）