php - jquery javascriptは画像を他の画像の上に配置します

Question

キャップの選択が可能なボトルを販売したいウェブサイトが 1 つあります。

これは参照サイトですが、速報です。 http://harmanindia.com/mixandmatch.php

ユーザーが各ボトルで各キャップをプレビューできるようにスクリプトを作成して、より適切な選択肢を選択できるようにしたいと考えています。

開発に役立つ参照コードを教えてください。

感謝と前進。

Answer 1

私が作成したこのサイトをチェックしてもらえますか Htmlコード

<div class="img-swap">
  <ul>
    <li>
      <a  class="active" href="">
        <span>
          One Sided
        </span>
        <img height="100" width="100" src="/images/product/51614099_business_cards01.png">
        <input type="hidden" value="/images/product/538734762_business_cards.png" class="oImg">
        <input type="hidden" value="/images/product/51614099_business_cards01.png" class="hImg">
      </a>
    </li>

    <li>
      <a class="inactive" href="">
        <span>
          Second Side
        </span>
        <img height="140" width="140" src="/images/product/2112217909_page_24.png">
        <input type="hidden" value="/images/product/2112217909_page_24.png" class="oImg">
        <input type="hidden" value="/images/product/1550391892_page_024.png" class="hImg">
      </a>
    </li>


  </ul>
</div>

Jクエリコード

var oImg,hImg;

    jQuery('.img-swap li a:not(.active)').mouseover(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery('.img-swap li a.active').mouseover(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery('.img-swap li a:not(.active)').mouseout(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',oImg);
    });

    jQuery('.img-swap li a.active').mouseout(function(){
        oImg = jQuery(this).find('.oImg').val();
        hImg = jQuery(this).find('.hImg').val();    
        jQuery(this).find('img').attr('src',hImg);
    });

    jQuery( ".img-swap li a.active" ).each(function() {
          oImg = jQuery(this).find('.oImg').val();
          hImg = jQuery(this).find('.hImg').val();  
          jQuery(this).find('img').attr('src',hImg);
    });

    jQuery( ".img-swap li a.inactive" ).each(function() {
         oImg = jQuery(this).find('.oImg').val();
          hImg = jQuery(this).find('.hImg').val();    
          jQuery(this).find('img').attr('src',oImg);
    });