點擊縮圖更改主要圖片？

在學習了JS約一個月後，完成了四門課程之後，我仍然無法確定在單擊縮略圖時如何更改圖像！我想要做的事很簡單，我只想在點擊縮略圖時更改主圖像！在這個例子中，div中有兩個縮略圖圖像，上面有一個主圖像。我只想在單擊縮略圖時更改主圖像。我知道這是DOM操作，並認爲它是：document.getElementById .....？點擊縮圖更改主要圖片？

我已經做了一個小頁面，以便我可以學習/嘗試不同的事情，並最終放棄並尋求幫助！代碼如下：

#MainContainer { 
position: relative; 
margin:0px auto; 
width: 500px; 
height: 400px; 
border: 1px solid black; 
} 
#MainImage { 
position: absolute; 
top: 10px; 
left: 50px; 
width: 398px; 
height: 265px; 
background: url(MainImage01.jpg); 
border: 1px solid black; 
} 
#TNBodyContainer { 
position: absolute; 
top: 290px; 
left: 100px; 
border: 1px solid black; 
width: 268px; 
height: 88px; 
} 
#TNOne { 
position: relative; 
width: 133px; 
height: 88px; 
background: url(SmallImage01.jpg); 
} 
#TNTwo { 
position: relative; 
left:135px; 
width: 133px; 
height: 88px; 
background: url(SmallImage02.jpg); 
} 

<body> 
<div id="MainContainer"> 
    <div id="MainImage"></div> 
    <div id="TNBodyContainer"> 
     <div id="TNOne"> 
      <div id="TNTwo"></div> 
     </div> 
    </div>

非常感謝您的幫助。

馬蓋特

來源

2013-03-22 Margate

您需要添加一些腳本來改變圖像被點擊或者縮略圖的時候。這個函數在頁面加載時被調用。改變圖像名稱以適應。這應該放在html頁面的部分。

<script> 
window.onload = function() { 
     var mainImg = document.getElementById('Main'); 

     document.getElementById('TNOne').onclick = function() { 
       mainImg.src = 'main1.jpg'; 
       //alert('one clicked'); 
     }; 
     document.getElementById('TNTwo').onclick = function() { 
       mainImg.src = 'main2.jpg'; 
       //alert('two clicked'); 
     }; 
}; 
</script>

兩個縮略圖div變成<img>標記具有相同的ID。類似地，主要<img>也被定義（id =「Main」）。現在元素是可點擊的。

<div id="MainContainer"> 
    <div id="MainImage"> 
     <img id="Main" src="MainImage01.jpg"</img> 
    </div> 
    <div id="TNBodyContainer"> 
     <img id="TNOne" src="thumb1.jpg"></img> 
     <img id="TNTwo" src="thumb2.jpg"></img> 
    </div> 
</div>

最後的縮略圖CSS，這裏浮動是用來保持縮略圖的TNBodyContainer專區內的同一行。

TNOne { 
width: 133px; 
height: 88px; 
float:left; 
} 
#TNTwo { 
width: 133px; 
height: 88px; 
float:left; 
}

來源

2013-03-22 00:52:24 suspectus

非常感謝你suspectus.Very方便我。我會保留代碼，以便從中學習。非常好你幫助我：） – Margate 2013-03-23 03:20:04

@Margate沒問題 - 提供答案很有趣。如果認爲Daniel提供的解決方案和/或我的解決方案是有益的，那麼您可以通過給我們加票來始終表示您的讚賞。 – suspectus 2013-03-23 09:12:46

要更改CSS背景屬性的圖片，你需要使用

document.getElementById("MainImage").style.background

正確的方法走的是添加事件偵聽器：

document.getElementById("TNOne").addEventListener("click", function (event) { 
      setImage(event); 
     }, false); 
     document.getElementById("TNTwo").addEventListener("click", function (event) { 
      setImage(event); 
     }, false); 

    }

他們都打電話相同的功能，但有了事件，可以看到「event.target.id」點擊了哪一個。

然後你可以決定你想要做什麼，例如switch語句。基本上說：如果event.target.id ==「TNOne」。

你可以看到這一切我給你做一個小提琴：http://jsfiddle.net/djwave28/32pQD/3/

有你的HTML和CSS一些輕微的變化太大。

來源

2013-03-22 01:08:20 Daniel

非常感謝丹尼爾給出的答案和在jsfiddle中花費的時間。我已經複製了代碼並將用它來學習/解決我的問題！需要做更多的課程！ – Margate 2013-03-23 03:12:27

非常歡迎您:-) ...在那裏做過，需要花時間學習。 @suspectus提供的解決方案可能工作原理相同。這裏有更多的信息在這裏：http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick 祝你好運！ – Daniel 2013-03-23 03:21:15

點擊縮圖更改主要圖片？

回答

相關問題