「インスピレーションを受けたい」サイトの次の製品ページをご覧ください。Magentoカスタムプロダクトオプション
あなたが見ることができるように、製品の選択肢の一つは、製品の色を選択することで、あなたがクリックするためのオプションがあり「カラーチャートはこちらをクリックしてください」と、あなたはたくさんのが提示されています入手可能な製品の色を示す写真。
ドロップダウンメニューのカスタムオプションを私が選択したオプションで追加する方法はわかっていますが、それらのイメージも表示するにはどうすればよいですか。 （また、imagesitをクリックすると、ドロップダウンメニューのオプションが変更されます。
素晴らしいリソースへのリンクでさえ、助けていただければ幸いです。ここで答えを投稿してください。（期待していないが）。事前に
感謝を！
私は、その後にこれを使用し、ドロップdown.Iの各オプションのテキストとIDを引き出すために、以下の使用して終了それぞれの色のイメージを内部に持つdivとして個別のスウォッチを作成します。
function createColourSwatch(theid, filename) {
if(theid != "" && filename != "NotSureSendMeSomeSamplesFirst" && filename != "PleaseSelect"){
newSwatch = "<div class='swatchPanel' onClick='changeOption(\""+theid+"\")'><img src='"+imgLocation+filename+".jpg' /></div>";
return newSwatch;
} else {
return "";
}
}
$j('.input-box:eq(0) option').each(function() {
klass = $j(this).text().replace(/[^a-zA-Z 0-9]+/g,'');
klass = klass.replace(/\s/gi,"");
itsId = $j(this).val();
$j('.colour-swatch:eq(0)').html($j('.colour-swatch:eq(0)').html()+createColourSwatch(itsId, klass));
});
イメージはスペースまたは英数字以外のドロップダウンテキスト値を使用して表示されます。たとえば、 "45/22 Deep Red"が "4522DeepRed.jpg"に変わりました。
次に、各スウォッチにはfollowig関数が与えられ、クリックされたものに応じてドロップダウン値が変更されます。
function changeOption(theId) {
$j('.input-box select').val(theId);
}
一般的なアプローチはskin/images/hairsamples/jetsetblack.jpg（利用可能な各色のためによくフォーマットされたURLを使用するようにして、すべてのオプションのための反復可能なURLをエコーすることです画像にonclickイベントをバインドするにはJavascriptを使用し、選択ボックスから適切なオプションを選択します。
ドロップダウン/カラーチャートのコンボをページに表示することは、実際は少し複雑です。カスタムオプションのタイプを作成したり、ハックすることができます。オプションテンプレートファイルのフィールドの名前を検出するだけです。
、製造元ベースのカラーセットをサポートして上記の修正ではなくskin/images/hairsamples/$manufacturer/$color.jpgを使用します。問題が解決しました！
この拡張機能は、あなたに役立つでしょうか？
http://www.magentocommerce.com/magento-connect/temgra/extension/893/color-swatches
（注意してください。あまりにも利用できる他の拡張機能がある）
それはすべて簡単に自分のメディアファイルに
だけ表示なしクラスで、すべての画像をロードダムでした。ちょうど追加
$(".className").show();
とマウスアウト
$(".className").hide();