翻轉DIV中的一個圖像以獲得另一個顯示在單獨的DIV中

Im建立一個網站，其中有一個女孩的照片，並在旁邊是一組眼鏡，你可以嘗試在她的臉上。現在我擁有了這個功能，當你翻轉組中的其中一副眼鏡時，它們會突出顯示，但我也希望當你點擊它時，一對在分開的DIV中顯示在照片上。翻轉DIV中的一個圖像以獲得另一個顯示在單獨的DIV中

這是我對剛剛翻轉：

function rollOver() 
    { 
     document.getElementById("helm").src ="images/helmOver.jpg"; 
    } 

    function rollOut() 
    { 
     document.getElementById("helm").src ="images/helmStatic.jpg"; 
    } 

</script> 

<div id="framestyle"> 
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/> 
</div>

這是我想在照片上顯示了一對被點擊時div和圖像：

<div id="glasses"> 
<img src="images/faceGlasses.png"> 
</div>

* **如何在第二個div中顯示圖像，以便在第一個div單擊圖像/翻轉時顯示？

來源

2013-05-28 user2423428

那麼問題是什麼？ –

用'style =「display：none」'創建div。在懸停時，將其更改爲'display：block' –

，但是如何將其他圖像鏈接到此圖像，以便在單擊其他圖像時顯示此圖像？ – user2423428

我想補充

function clickedGlasses(glassesImage) { 
    document.getElementById("glasses_overlay").src = glassesImage; 
    document.getElementById("glasses_overlay").style.display = "block"; 
}

到腳本標籤在上面，然後

<img id="glasses_overlay" src="blank.png" style="display:none;">

進入你的「眼鏡」格旁邊的「faceGlasses」形象（你需要定位這在其他div的頂部，無論是絕對的，還是相對的）

最後，將您的「掌舵人」img改爲

<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />

來源

2013-05-28 22:42:05 Jazzer

嗚！非常感謝 – user2423428

翻轉DIV中的一個圖像以獲得另一個顯示在單獨的DIV中

回答

相關問題