改變圖像到另一個圖像

Question

即時通訊設法改變圖像到另一個圖像當用戶點擊他們對圖像或顏色的選項，我有一張圖片顯示什麼即時通訊嘗試做 這是第二圖片 http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg

HTML

<div class="container"> 
<p class="img-main"> 
<a href="#" class="overlaybox-img"> 

<img src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"> 
</a> </p> 
<div id="colorsAndAltContainer"> 
<ul class=""> 

    <li class="defaultColor selected"> 
        <div class="inner"> 
         <div class="description">BLACK</div> 
         <div class="rgbColor" data-color="000000" style="background-color: #000000"></div> 
        </div> 
       </li> 
       <li> 
        <div class="inner"> 
         <div class="description">WHITE</div> 
         <div class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div> 
        </div> 
       </li> 

    <div class="altImages"> 

    <ul class="alternativeImages">  
    <li class="selected"> 

     </li> 
     <li> 
      <img alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" > 
     </li> 
    </ul> 
       </div>   

       </ul> 
    </div> 
     </div> 

CSS：

.container { 
min-height: 565px; 
width: 878px; 
margin: 0 auto; 
padding-top: 220px; 
position: relative; 
} 

body{ 
background-color: #000; 
} 
.img-main { 
margin-bottom: 10px; 
text-align: center; 
float: left; 
margin-top: 0px; 
} 
#colorsAndAltContainer { 
position: relative; 
top: 0; 
right: 0; 
width: 70px; 
height: 300px; 
float: left; 
margin-left: 6px; 
} 
.inner { 
cursor: pointer; 
} 
.description { 
display: none; 
} 
.rgbColor { 
border: 1px solid #cbcbcb; 
width: 13px; 
height: 13px; 
} 
.selectColor { 
float: left; 
} 

.selectColor ul { 
float: left; 
margin-right: 6px; 
} 
ul { 
list-style: none; 
padding: 0; 
margin-top: 0px; 
} 
.altImages { 
position: absolute; 
width: 70px; 
bottom: 0; 
right: 0; 
} 
.alternativeImages { 
bottom: 0; 
} 
.alternativeImages li { 
cursor: pointer; 
margin-top: 6px; 
} 
img { 
display: block; 
} 

Answer 1

以下是在簡單的Javascript中使用它的最簡單方法。

function switchImages(){ 
 
    if(document.getElementById("mainImage").src != "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg") { 
 
    document.getElementById("mainImage").src = "http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg"; 
 
    document.getElementById("smallImage").src = "http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg"; 
 
    }else{ 
 
    document.getElementById("mainImage").src = "http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"; 
 
    document.getElementById("smallImage").src = "http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg"; 
 
    } 
 
     
 
    
 
}

.container { 
 
min-height: 565px; 
 
width: 878px; 
 
margin: 0 auto; 
 
padding-top: 220px; 
 
position: relative; 
 
} 
 

 
body{ 
 
background-color: #000; 
 
} 
 
.img-main { 
 
margin-bottom: 10px; 
 
text-align: center; 
 
float: left; 
 
margin-top: 0px; 
 
} 
 
#colorsAndAltContainer { 
 
position: relative; 
 
top: 0; 
 
right: 0; 
 
width: 70px; 
 
height: 300px; 
 
float: left; 
 
margin-left: 6px; 
 
} 
 
.inner { 
 
cursor: pointer; 
 
} 
 
.description { 
 
display: none; 
 
} 
 
.rgbColor { 
 
border: 1px solid #cbcbcb; 
 
width: 13px; 
 
height: 13px; 
 
} 
 
.selectColor { 
 
float: left; 
 
} 
 

 
.selectColor ul { 
 
float: left; 
 
margin-right: 6px; 
 
} 
 
ul { 
 
list-style: none; 
 
padding: 0; 
 
margin-top: 0px; 
 
} 
 
.altImages { 
 
position: absolute; 
 
width: 70px; 
 
bottom: 0; 
 
right: 0; 
 
} 
 
.alternativeImages { 
 
bottom: 0; 
 
} 
 
.alternativeImages li { 
 
cursor: pointer; 
 
margin-top: 6px; 
 
} 
 
img { 
 
display: block; 
 
}

<div class="container"> 
 
<p class="img-main"> 
 
<a href="#" class="overlaybox-img"> 
 

 
<img id="mainImage" src="http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"> 
 
</a> </p> 
 
<div id="colorsAndAltContainer"> 
 
<ul class=""> 
 

 
    <li class="defaultColor selected"> 
 
        <div class="inner"> 
 
         <div class="description">BLACK</div> 
 
         <div onclick="switchImages();" class="rgbColor" data-color="000000" style="background-color: #000000"></div> 
 
        </div> 
 
       </li> 
 
       <li> 
 
        <div class="inner"> 
 
         <div class="description">WHITE</div> 
 
         <div onclick="switchImages();" class="rgbColor" data-color="FFFFFF" style="background-color: #FFFFFF"></div> 
 
        </div> 
 
       </li> 
 

 
    <div class="altImages"> 
 

 
    <ul class="alternativeImages">  
 
    <li class="selected"> 
 

 
     </li> 
 
     <li> 
 
      <img onclick="switchImage();" id="smallImage" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" > 
 
     </li> 
 
    </ul> 
 
       </div>   
 

 
       </ul> 
 
    </div> 
 
     </div>

Answer 2

首先分配ID到您的短衫圖像：

<img id="t-shirt" alt="T-Shirt and Jersey" class="alternativeImage" src="http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg" width="54" height="54" > 

然後在你的黑色&白色的按鈕分配與所述圖像的T恤衫將改爲的URL的數據屬性：

<div class="inner" data-image-id="http://urltoblackimage.jpg"></div> 

然後使用jQuery來改變點擊圖片src：

$('div.inner').click(function() { 
    var image = $(this).attr('data-image-id'); 
    $('#t-shirt').attr('src', image); 
}); 

也許給你的div class =「inner」帶一個更好的觸發器名稱或一個更具描述性的類名以避免衝突。

Answer 3

添加ID到相關<a>標籤，與

document.getElementById('idOfTag').setAttribute('href')='someOtherImage.jpg';

這種訪問這純粹是一個javascript函數內的幾行。製作按鈕，或任何用戶點擊，聽和執行此功能，通過添加onclick="yourFunctionsName()

沒有jquery必要！

Answer 4

這裏是不改變現有的代碼什麼的簡單方法。

<script> 
$().ready(function(){ 
$('#colorsAndAltContainer li').on('click',function() 
{ 

    if($(this).find('.rgbColor').data('color') === "000000") 
    { 
     $('a.overlaybox-img img').attr("src","http://s24.postimg.org/6khgqwwg5/HM10_T_1004_BK_1.jpg"); 
     $('.alternativeImage').attr("src","http://s4.postimg.org/6ualhzpex/HM10_T_BACKLOGOLESS_BK.jpg"); 
    } 
    else if($(this).find('.rgbColor').data('color') === "FFFFFF") 
    { 
    $('a.overlaybox-img img').attr("src","http://coldcoffee.jp/resources/upload/products/thumbnail2/HM10-T-1004-WH.jpg"); 
    $('.alternativeImage').attr("src","http://s21.postimg.org/ep27oalqr/HM10_T_BACKLOGOLESS_1.jpg"); 
    } 
}); 

$('.alternativeImage').on('click',function() 
{ 
    var smallImageUrl = $(this).attr("src"); 
    var mainImageUrl = $(".img-main img").attr("src"); 
    $(this).attr("src",mainImageUrl); 
    $(".img-main img").attr("src",smallImageUrl); 
    $(".img-main img").css("width","300px"); 
}); 
}); 
</script> 

工作環節：http://jsfiddle.net/b2c5e19h/5/