如何将鼠标上的图像更改为另一个图像

How to change an image on mouse over of another image

本文关键字：图像 另一个 鼠标      更新时间：2023-09-26

我正在为朋友/客户的披萨店建立一个网站。这是当地的，他希望有基本的功能，而不是太多的维护。因此，我用静态html和css构建它。

我遇到的问题是，当我试图通过onmouseover事件更改图像的src标记来使他的菜单一次显示一个部分时，它实际上从未更改。

我设置它的方式是一个3乘3的菜单标题网格，每个标题200乘67像素。在每一个按钮上，我都有do onmouseover="displaymenu（~）"，其中~是数字1到9，具体取决于按钮。该函数只需调用一个开关，在每种情况下都会更改显示菜单相应部分的图像下方的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不是最好的方法，请告诉我，我会按照你的想法去做。

编辑：我尝试过三种最古老的解决方案，但都没有成功。有人能告诉我，是不是只有我的电脑出现了这些问题，而不是代码问题？

非常感谢，-Elliot S

尝试

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

或

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

您需要引用分配给.src属性的值，以便将其解释为文字字符串：

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

我想这也会让你笑起来

您的Switch不工作！

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.
相关文章：