ページ 11

オンマウスで商品画像を切り替える記述が上手くいきません

投稿記事Posted: 2019年1月11日(金) 09:53
by masa58
度々お世話になります。
商品表示のブロック内で、オンマウスで商品画像を切り替える記述が上手くいきません。

下記のようなhtmlのコードとCSSで商品画像を切り替えを行いたいと思っています。

<div class="imgonmouse">
 <!--一番最初に表示される画像-->
A. <img src="画像1アドレス" name="imgonmouse" width="300" height="300" />
 <ul>
B. <li><img src="画像1アドレス" onMouseOver="document.imgonmouse.src='画像1アドレス'" /></li>
 <li><img src="画像2アドレス" onMouseOver="document.imgonmouse.src='画像2アドレス'" /></li>
 <li><img src="画像3アドレス" onMouseOver="document.imgonmouse.src='画像3アドレス'" /></li>
 <li><img src="画像4アドレス" onMouseOver="document.imgonmouse.src='画像4アドレス'" /></li>
 </ul>
 </div>

Bの行の[ onMouseOver="document.imgonmouse.src='画像1アドレス' ] の '画像1アドレス'の部分の
カスタム項目からアドレスを表示させる記述がわかりません。


Aは <img cms:id="product_photo1" src="" width="400" name="imgonmouse" />

Bは <li class="box2"><img cms:id="product_photo1*" src="" onMouseOver="document.imgonmouse.src='?'" /></li>>

と記述すると、Aの一番最初に表示される画像と Bのサムネイル画像は表示されています
後は?の部分をどう記述したら良いかお教えください。

Re: オンマウスで商品画像を切り替える記述が上手くいきません

投稿記事Posted: 2019年1月12日(土) 06:12
by inunosinsi
SOYShopの画像フィールドを使用しているならば、
コード: 全て選択
<li class="box2"><img src="<!-- cms:id="product_photo1_text" /-->" onMouseOver="document.imgonmouse.src='<!-- cms:id="product_photo1_text*" /-->'" /></li>>


こんな感じで画像のパスをテキストで2個所出力でしょうか

Re: オンマウスで商品画像を切り替える記述が上手くいきません

投稿記事Posted: 2019年1月12日(土) 17:57
by masa58
ありがとうございました。

<li class="box2"><img src="<!-- cms:id="product_photo1_text" /-->" onMouseOver="document.imgonmouse.src='<!-- cms:id="product_photo1_text*" /-->'" /></li>

で、正しく表示されました。

カスタム項目ID 「 product_photo1 」の後ろに _text を付けて、画像のパスを返すということを知りました。
画像が表示されたので気がつきませんでしたが、<img cms:id="product_photo1*" src=" " の記述では画像そのものが表示されて
いたのですね。 勉強になりました。