3

我是一名新的网络开发人员，所以我不知道最佳实践。

我在页面上有一些图像，我想在悬停时更改它们。我找到了两个解决方案，但我不知道哪个更好。

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

这可以自动化吗？如何做到专业、通用？

4

4 回答 4

1

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

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

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

于 2012-11-08T11:55:56.267 回答
1

这可能是接触jQuery的好时机。您基本上可以编写一种更动态的方式来完成您想要的事情，类似于您当前在onmouseoverandonmouseout属性中所做的事情。另外，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和版本存储在和子文件夹中。确保两个图像具有相同的文件名。然后添加到您希望具有此行为的标签。unlightlightunlightclass="some-class"img

额外阅读：

于 2012-11-08T12:03:24.200 回答
0

显然有很多方法可以做到这一点，但这是一种方法。

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

此外，除非您显示表格数据，否则您真的不应该在您的网站上使用表格。坚持使用 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);
}
于 2012-11-08T11:51:49.007 回答
-1

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>
于 2012-11-08T11:44:20.513 回答