php - jquery javascript places image over other image

Question

I have one website want to sell the bottles with choice of caps.

This is reference site but it is in the flash. http://harmanindia.com/mixandmatch.php

I want to write the script in such a way that the user can preview the each cap with each bottles so they can select the better choice.

Can anybody please provide me reference code which will help me to developed.

Thanks and advance.

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>

jQuery代码

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);
    });