カラーミーショップの商品画像をマウスオーバーで切り替える | コーディング・プログラミング・WEB制作ブログ

カラーミーショップの商品画像をマウスオーバーで切り替える

カラーミーショップの商品詳細ページで商品画像が複数ある場合に、
メイン画像部分の商品画像をマウスオーバーで切り替える方法をメモ

やり方は、画像を表示したい箇所に

<!--商品画像-->
<script type='text/javascript'>
<!--
function imageSet(iData)
{
document.images['data'].src=iData;
}
-->
</script>
<!-- メイン商品画像 -->
<div class="main">
<{if $product.img_url != ""}><img name='data' src="<{$product.img_url}>" class="large" /><{else}><img src="http://img.shop-pro.jp/tmpl_img/13/now200.gif" /><{/if}>
</div>
<!--// メイン商品画像 -->
<!-- サブ商品画像 -->
<ul>
<{if $product.img_url != ""}>
<li><a href='JavaScript:void(0)' onmouseover='imageSet("<{$product.img_url}>")'><img src="<{$product.img_url}>" width="90" height="70" /></a></li>
<{/if}>

<{if $product.ot1_url != ""}>
<li><a href='JavaScript:void(0)' onmouseover='imageSet("<{$product.ot1_url}>")'><img src="<{$product.ot1_url}>" width="90" height="70" /></a></li>
<{/if}>

<{if $product.ot2_url != ""}>
<li><a href='JavaScript:void(0)' onmouseover='imageSet("<{$product.ot2_url}>")'><img src="<{$product.ot2_url}>" width="90" height="70" /></a></li>
<{/if}>

<{if $product.ot3_url != ""}>
<li><a href='JavaScript:void(0)' onmouseover='imageSet("<{$product.ot3_url}>")'><img src="<{$product.ot3_url}>" width="90" height="70" /></a></li>
<{/if}>
</ul>

<!--// サブ商品画像-->

のように記述すればOK

もしメインの画像をクリックしたら拡大画像を表示するようにする場合は

<!--商品画像-->
<script type='text/javascript'>
<!--
function imageSet(iData)
{
document.images['data'].src=iData;
//拡大リンク用スクリプト
var xLink = document.getElementById("link1");
xLink.getAttributeNode("href").value=iData;
}
-->
</script>
<!-- メイン商品画像 -->
<div class="main">
<{if $product.img_url != ""}><a id="link1" href="<{$product.img_url}>" target="_blank"><img name='data1' src="<{$product.img_url}>" class="large" /></a><{else}><img src="http://img.shop-pro.jp/tmpl_img/13/now200.gif" class="large" /><{/if}>
</div>
<!--// メイン商品画像 -->

のように、スクリプトを追加して、
メイン画像部分に

<a id="link1" href="<{$product.img_url}>" target="_blank">～</a>

を追加してあげればOK

カラーミーショップはhead内の部分を編集できないのでjavascriptを直接記述します。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業