如何在鼠标悬停时更换多张图片

Question

我是一名新的网页开发者，所以不太了解最佳实践。

我的页面上有几张图片，我想在鼠标悬停时更改它们。我找到了两种解决方案，但我不知道哪个更好。

第一个解决方案是使用 HTML：

<td>
  <a href="getContent('unlight');">
    <img src="res/images/unlight/p_first.png"
         onmouseover="this.src='res/images/light/p_first.png'" alt="First"
         onmouseout="this.src='res/images/unlight/p_first.png'"/>
    <br>first
  </a>
</td>

第二种方法是使用CSS：

<td id="first" onclick="getContent('first');">First</td>

#first{
    background: no-repeat url("./images/unlight/p_first.png");
    width: 78px;
    height: 78px;
    }

#first:hover {
    background: no-repeat url("./images/light/p_first.png");
    width: 78px;
    height: 78px;
}

现在，每个img都需要编写两条路径。这个过程能够自动化吗？如何进行专业和通用的操作？

- kpojasek

---

您可以使用CSS悬停图像，无需JavaScript。 - Sandeep Pattanaik

Answer 1

您可以使用第二个元素，但是HTML必须处于正确的值。仅有td值是不够的。

 <div id="first" >First</div>​

Dome在这里 http://jsfiddle.net/4qQPL/1/

- Selvamani

---

这仍然是个问题，因为对于所有的图片我都需要创建新的样式。想象一下，如果我需要创建50张图片，那么这就不是一个实际的做法了。 - kpojasek

当鼠标悬停在单个图像上时，意味着在高度和宽度内显示多个图像？ - Selvamani

意思是一个图像悬停会更改此图像。像按钮一样。但我有50个按钮。 - kpojasek

这意味着，当您将鼠标悬停在一个按钮图像上时，其他49个图像将会变成第一个按钮图像，对吗？ - Selvamani

每个按钮都有自己的悬停图像。每个按钮都是独立的。你知道我的意思吗？ - kpojasek

我编辑了一些东西。希望这对你有所帮助。http://jsfiddle.net/4qQPL/3/ - Selvamani

Answer 2

现在是学习jQuery的好时机。你可以用更动态的方式完成你想要的功能，类似于你目前在onmouseover和onmouseout属性中所做的。此外，jQuery允许你将这种逻辑从HTML标记中提取出来，放到一个完全独立的.js文件中。

一旦你引入了jQuery，你就可以创建一个类似下面这样的脚本。（我已经尽可能详细地注释了，以便你理解正在发生的事情：

$(document).ready(function() {
    // Any `img` tag with a class of `some-class` (or whatever you want) will get this behavior on hover
    $("img.some-class").hover(
        // This first handler is for the `onmouseover` state
        function() {
            // Storing a query for `this` in a variable only runs the query once. Otherwise, you'd run it twice in the line below
            var $this = $(this);
            // Replace `/light/` in the image URL with `/unlight/`
            $this.attr("src", $this.replace("/light/", "unlight"));
        },
        // This second handler is for the `onmouseout` state
        // Its logic is similar to the first handler, so I'll omit comments explaining it
        function() {
            var $this = $(this);
            $this.attr("src", $this.replace("/unlight/", "light"));
        }
    );
});

现在，您应该能够将每个图像的light和unlight版本存储在light和unlight子文件夹中。确保两个图像具有相同的文件名。然后，在要具有此行为的img标记中添加class="some-class"。

额外阅读：

• jQuery hover() 方法
• jQuery attr() 方法
• JavaScript replace() 方法

- Chris Peters

---

是的，我也在考虑这个解决方法，但我不确定它是否是“专业”的方法。在这个问题中经常使用这种解决方案吗？ - kpojasek

这取决于情况。我认为在你的情况下这是有意义的，因为你有很多需要这种处理的图像。如果所有图像都是完全相同的大小，则@Billy Moat的解决方案是有意义的，但我更喜欢页面上实际的<img>标签而不是一堆带有背景图像的<div>。此外，该页面上还描述了其他基于CSS的解决方案：http://stackoverflow.com/questions/5249229/darken-image-on-rollover（实际上我可能更喜欢基于CSS的解决方案。） - Chris Peters

Answer 3

显然有很多方法可以实现这个目的，但这里介绍一种方法。

将两张图片合并成一张图片，将该图片用作背景图片，并在悬停/聚焦时更改图像的背景位置以显示第二张图片。

此外，除非您正在显示表格数据，否则您真的不应该在网站上使用表格。请使用DIV标签、SECTION标签等。

示例：

<a id="image1" class="hover-image" href="#">First</a>

// set a class which contains global settings for all relevant images.

a.hover-image {
 width:XXXpx;
 height:XXXpx;
 background-repeat:no-repeat;
 background-position:0 0;
}

a.hover-image:hover, a.hover-image:focus {
 background-position:XXXpx XXXpx;
}


// set the background image path based on a unique ID.

a#image1 {
 background-image:url(XXX.png);
}

- Billy Moat

---

是的，但问题在于当我有50张图片时，我需要为所有图片创建样式。我太懒了，不想这么做 :D 我在考虑写一些脚本？ - kpojasek

Answer 4

CSS

.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/myImage.png') bottom;
    text-indent: -99999px;
}
.myButtonLink:hover {
    background-position: 0 0;
}

HTML

<a class="myButtonLink" href="#LinkURL">Leaf</a>

- Kawabry

---

但那将是一个img。我有几个不同的img，例如： {{link1：<img src =“a.jpg”/>}} {{link2：<img src =“b.jpg”/>}} {{link3：<img src =“c.jpg”/>}} - kpojasek

<td id="kancelaria" onclick="getContent('main');">律师事务所</td> <td id="intencje" onclick="getContent('intencje');"></td> <td id="ogloszenia" onclick="getContent('ogloszenia');"><br>公告</td> <td id="duszpasterze" onclick="getContent('duszpasterze');"><br>牧灵</td> CSS:#kancelaria { background: no-repeat url("./images/niepodswietlone/p_kancelaria.png"); width: 78px; height: 78px;
}#kancelaria:hover{ background: no-repeat url("./images/podswietlone/p_kancelaria.png"); width: 78px; height: 78px; }现在是这样的，但我想要更通用的。 - kpojasek