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

SOY Shopに関する話題はこちら。

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

投稿記事by masa58 on 2019年1月11日(金) 09:53

度々お世話になります。
商品表示のブロック内で、オンマウスで商品画像を切り替える記述が上手くいきません。

下記のような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のサムネイル画像は表示されています
後は?の部分をどう記述したら良いかお教えください。
masa58
 
記事: 52
登録日時: 2013年6月18日(火) 11:10

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

投稿記事by inunosinsi on 2019年1月12日(土) 06:12

SOYShopの画像フィールドを使用しているならば、
コード: 全て選択
<li class="box2"><img src="<!-- cms:id="product_photo1_text" /-->" onMouseOver="document.imgonmouse.src='<!-- cms:id="product_photo1_text*" /-->'" /></li>>


こんな感じで画像のパスをテキストで2個所出力でしょうか
大阪でフリーのプログラマをしています。
以前はSOY CMSの開発元で働いていました。

SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

最近はSOY Shopを業務アプリとして使用できないか?と模索しています。
SOY Shopで管理画面のみ使用モードを追加しました - saitodev.co

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 766
登録日時: 2008年6月12日(木) 20:48

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

投稿記事by masa58 on 2019年1月12日(土) 17:57

ありがとうございました。

<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=" " の記述では画像そのものが表示されて
いたのですね。 勉強になりました。
masa58
 
記事: 52
登録日時: 2013年6月18日(火) 11:10


Return to SOY Shop

オンラインデータ

このフォーラムを閲覧中のユーザー: Google [Bot] & ゲスト[4人]

cron