KH-WEBLOG TOP > 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を直接記述します。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事