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我需要写两条路径。

这可以自动化吗？如何做到专业和普及？

Answer 1

使用可以使用第二件事，但html应该是正确的值。只有td值是不够的。

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

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

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版本。确保两个图像具有相同的文件名。然后将class="some-class"添加到您希望出现此行为的img代码中。

额外阅读：

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);
}

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>

悬停时如何更改大量img

4 个答案: