Javascript函數交換圖像

我應該編寫並使用JavaScript函數將內容插入到HTML元素中： •創建一個名爲swapOut的函數，其中包含以下語句：document.imageFlip.src =「第一個圖像的名稱」。 •創建一個名爲swapBack的函數，其中包含以下語句：document.imageFlip.src =「第二個圖像的名稱」。 •插入一個id標識爲myImage的div標籤。
•在div容器內部，插入一個帶有id和名稱爲imageFlip的圖像標籤。初始化圖像標籤以顯示第一幅圖像。設置高度和寬度屬性。將alt和title屬性設置爲「可交換圖像」。 alt =「可交換圖像」title =「可交換圖像」height =「」width =「」Javascript函數交換圖像

•在圖像標籤內部，添加onmouseover =「swapOut（）」和onmouseout =「swapBack（）」。這些定義了圖像元素可識別的事件。當您將鼠標移動到圖像上時，第一個調用您的swapOut功能;第二個調用您的swapBack功能時，將鼠標從圖像上移開。

到目前爲止，我已經做到了這一點。在我的.js形成我有

function swapOut() { 
    document.imageFlip.src = "firstImage" 
} 

function swapBack() { 
    document.imageFlip.src = "secondImage" 
}

，並在我的.htm形式我有

<div id="myImage" name="myImage"> 


<img src="firstImage.png" alt="Swappable image" title="Swappable image" id="imageFlip" 
name="imageFlip" onmouseout="swapBack()" onmouseover="swapOut()" height="200" width="200"/> 


</div>

我需要的圖像交換，但我得到的第一個圖像然而，當我在它懸停我只得到一個沒有圖片的盒子

來源

2012-11-12 mnq1

剛剛看了一下你的代碼，你忽略了替換'src'屬性的字符串中的圖像擴展。像'firstImage.jpg'一樣。 – Ally

非常感謝你我非常感謝我一直在尋找那種形式的幫助！ – mnq1

沒有probs。如果問題確實解決了您的問題，我會給出答案。 – Ally

確保你分配給你的'src'屬性有完整的圖像路徑和擴展名。

對於您的情況下，將

document.imageFlip.src = "firstImage.png" 
// or 
document.imageFlip.src = "secondImage.png"

您也可以使用

document.getElementById('imageFlip').src = "firstImage.png"

如果你不想到處使用name屬性，這是做這種類型的常見方式的事情，（我可能是錯誤的），但我認爲名稱屬性在HTML5中已棄用。

來源

2012-11-12 04:19:30 Ally

想念圖片的擴展。

來源

2012-11-12 04:25:45 pokopang

<img src="firstImage.png" alt="Swappable image" title="Swappable image" onMouseOver="this.src='secondImage.png'" onMouseOut="this.src='firstImage.png'" height="200" width="200"/>

來源

2012-11-12 04:40:30 Wilf

Javascript函數交換圖像

回答

相關問題