JavaScript圖像交換

所以這是我遇到的一個非常簡單的問題。我正在嘗試爲我的一個學校作業設置一個網頁。這是一個在線訂單，包含我們銷售的圖片。我賣T恤衫，我首先在襯衫上展示設計的縮略圖。我希望能夠讓人們點擊縮略圖，並將圖像交換到襯衫的完整圖像。我已將這兩個文件放在與index.html以及java和php文件相同的目錄中。我的大多數HTML是使用JavaScript生成的，我只是不知道爲什麼它不會工作。櫥窗是我的div我想在顯示圖片的名稱JavaScript圖像交換

的代碼來生成IMG的div抱着我的縮略圖。

Showcase.innerHTML += '< img src="GorgeThumb.jpg" alt="image not found" id="MiniGorge" onclick = "ImgSwap()">'

和縮略圖顯示了罰款。但是，當我嘗試切換它們不起作用。這是我的功能::

function ImgSwap() 
var MetalMini = (document.getElementById("MiniGorge")) 
if (MetalMini.src === "GorgeThumb.jpg") 
{ 
    document.getElementById("MiniGorge").src = "Metallica-Gorge.jpg"; 
} 
else if (MetalMini.src === "Metallica-Gorge.jpg") 
{ 
    document.getElementById("MiniGorge").src = "GorgeThumb.jpg"; 
}

我肯定有人能在這個解決方案是多麼簡單嗤之以鼻，但如果任何人都可以使用該即時通訊幫助樂於接受的羞辱！：d。

我嘗試了下面的答案，無法讓他們工作。只是一個更新：如果我使用這個：

enter code here 

function ImgSwap() 
{ 
var MetalMini = document.getElementById("MiniGorge"); 
if (MetalMini.src = "GorgeThumb.jpg") 
{ 
    MetalMini.src = "Metallica-Gorge.jpg"; 
} 
}

它似乎工作正常。它切換到大圖像。然而，如果我使用

function ImgSwap() 
{ 
var MetalMini = document.getElementById("MiniGorge"); 
if (MetalMini.src = "GorgeThumb.jpg") 
{ 
    MetalMini.src = "Metallica-Gorge.jpg"; 
} 
if (MetalMini.src = "Metallica-Gorge.jpg") 
{ 
    MetalMini.src = "GorgeThumb.jpg"; 
} 
}

所有它失敗，根本沒有圖像交換。

figrued out！

所以我只是讓方式太多的代碼，但想通了。我只是調用兩個獨立的方法onmouseover和onmouseout。儘管謝謝大家的幫助！

解決方案：

Showcase.innerHTML += '<img src="GorgeThumb.jpg" id="MiniGorge" onmouseover="ImgSwapGorge()" onmouseout="ImgRevGorge()">'; 


function ImgSwapGorge() 
{ 
var MetalMini = document.getElementById("MiniGorge"); 
if (MetalMini.src = "GorgeThumb.jpg") 
{ 
    MetalMini.src = "Metallica-Gorge.jpg"; 
    MetalMini.id = "MegaGorge"; 
} 
else 
{ 
    MetalMini.src = "GorgeThumb.jpg"; 
} 
} 

function ImgRevGorge() 
{ 
var MetalMini = document.getElementById("MegaGorge"); 
MetalMini.src = "GorgeThumb.jpg"; 
MetalMini.id = "MiniGorge"; 
}

所以希望如果有人在那裏正在尋找一個（低效率），但工作代碼，切換圖像這裏是！

來源

2014-03-28 Jimmz

你在使用jQuery嗎？我問，因爲你已經在你的問題中包含了標籤，但你的所有語法都是普通的longhand JavaScript。 – isherwood

即時通訊對不起，這是一個錯誤，我相信我已經在我的代碼啓用它只是沒有實際使用它。 – Jimmz

看看這個，也許它會幫助你：http：// stackoverflow.com/a/20456183/3296133 – DeeKayy90

您的問題可能是渲染代碼。你可以嘗試使用jQuery也看下面的代碼。

$('#MiniGorge').on('click', function(){ 
    var name = $(this).attr('src'); 
    if(name == "GorgeThumb.jpg"){ 
     $(this).attr('src', "Metallica-Gorge.jpg"); 
    } else { 
     $(this).attr('src', 'GorgeThumb.jpg'); 
    } 
});

來源

2014-03-28 14:17:13 kag

JavaScript圖像交換

回答

相關問題