如何在鼠標上改變另一圖像的圖像

我正在爲朋友/客戶的披薩店建立網站。它是本地的，他希望擁有基本的功能，而且如果有任何維護，它不會太多。因此，我建立它在靜態HTML和CSS。如何在鼠標上改變另一圖像的圖像

我遇到的問題是，當我嘗試通過讓onmouseover事件更改圖像的src標記時，使其菜單一次顯示一段時，它實際上從未實際更改過。

我設置的方式是一個3×3的菜單標題網格，每個網格200×67像素。在他們每個人我都有onmouseover =「displaymenu（〜）」，其中〜是數字1到9，具體取決於按鈕。該功能簡單地調用開關，並在每種情況下將圖像的src更改爲顯示菜單的相應部分的其他圖像的src。

我具備的功能設置是這樣的：

function displaymenu(x) { 
    switch (x) { 
    case 1: 
     document.getElementById("menuimage").src = "images/AppetizersMenu.jpg"; 
     break; 
    case 2: 
     //same as 1 except a different src, same for 3-9.

我試圖改變圖像的ID爲menuimage。此代碼位於文檔的<head>部分。我似乎無法讓事情奏效，並尋找解決方案。如果JavaScript不是要走的路，讓我知道，我會做你的想法。

編輯：我已經嘗試了3個最古老的解決方案，但沒有找到任何成功。有人能告訴我，只有我的電腦有這些問題而不是代碼問題嗎？

由於一噸，-Elliot小號

來源

2012-07-11 Elliot Sternberg

我想你的意思是_head_部分。嘗試先引用你的圖片url – Arcadien 2012-07-11 14:55:01

我的圖像是在一個div內，這是一個更多的div。因爲它不是PHP，所以我認爲最好的方式是顯示你將在服務器上。轉到[bestpizzaschaumburg.com/menu.html]對不起，它仍然有點馬虎，但它是一個WIP。 – 2012-07-11 19:23:41

嘗試

document.getElementById("menuimage").setAttribute('src','images/AppetizersMenu.jpg;');

或

document.getElementById("menuimage").src='images/AppetizersMenu.jpg';

來源

2012-07-11 14:55:12

你需要引用您分配到的.src屬性的值，這樣它會被解釋爲文字字符串：

document.getElementById("menuimage").src = "images/AppetizersMenu.jpg";

來源

2012-07-11 14:56:24 codebox

即使使用此功能，圖像在IE或Chrome上也無法正常顯示。我過去曾試過報價，但沒有奏效，所以我一直在玩，希望能夠實現它。本地查看會產生不同的結果，如果我將其上傳到我的服務器上？ – 2012-07-11 15:35:23

Javascript現在看起來不錯 - 你確定圖片的路徑是正確的嗎？嘗試使用「images/AppetizersMenu.jpg」作爲src值手動添加標籤到html中，如果您沒有看到圖像，那麼路徑是錯誤的。 – codebox 2012-07-12 07:00:36

我認爲這會讓你笑一笑

你的開關不工作！

function displaymenu(x) { 
var x = parseInt(x); // MAGIC LINE 
switch (x) { 
case 1: 
    $('#holder').hide(); 
    break; 
case 2: 
    //same as 1 except a different src, same for 3-9.

來源

2012-07-11 15:50:42 mhan

這也行不通，我也上傳到我的服務器，並沒有成功在線檢查。也許這是我的圖片標籤去''它以前是空白的src標籤，但我想它可能需要一個。仍然沒有運氣。 – 2012-07-11 16:06:38

是在一個div內的img？或任何其他類型的容器？你能在這個元素上粘貼更多的html代碼嗎？ – mhan 2012-07-11 16:12:10

我的圖像是在一個div內，這是在一個div內。因爲它不是PHP，所以我認爲最好的方式是顯示你將在服務器上。轉到[http：// bestpizzaschaumburg。com/menu.html]對不起，它仍然有點草率，但它是一個WIP。 – 2012-07-11 17:03:39

如何在鼠標上改變另一圖像的圖像

回答

相關問題