0

我的 html 页面上有 2 个图像：悬停时 image2 将替换 image1。这没问题，但棘手的部分是 image1 自己形成一个链接，并且无论图像的实际尺寸如何，两个图像都应始终以指定的长度和宽度显示。

现在我可以管理悬停部分、指定的设置尺寸、image1 的链接（href），但两个图像都将部分显示而不是显示完整的图像，而只是调整到指定的尺寸。

有人可以帮忙吗？

我的html：

<table width="100" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
     <a href="@Url.Action("TestMethod", "Deal")" ><alt="" class="links" title="plaat1"/></a>
   </td>
 </tr>
</table>

我的.css：

.links { display:block;
        background:url(../../Content/image1.jpg) center top no-repeat;
        height:124px;
        width:186px;
       }

.links:hover { background:url(../../Content/image2.jpg) center top no-repeat;
             }

有人可以帮忙吗？非常感谢！

4

2 回答 2

1

IMG如果要显示所有图像而不被裁剪（即：调整大小），则必须使用标签。您可以借助脚本来设置和恢复悬停时的图像。将IMG标签的SRC属性用于普通图像，将自定义HOVER属性用于悬停图像。

<html>
  <head>
    <style>
      .links>img { height:124px; width:186px; }
    </style>
    <script>
      onload = function() {
        var a = document.getElementsByClassName('links');
        for (var b = 0; b < a.length; b++) {
          var c = a[b].firstElementChild;
          c.setAttribute('img', c.src);
          c.addEventListener('mouseenter', function(ev) {
            ev.target.src = ev.target.attributes['hover'].value;
          }, false);
          c.addEventListener('mouseout', function(ev) {
            ev.target.src = ev.target.attributes['img'].value;
          }, false);
        }
      }
    </script>
  </head>
  <body>
    <table width="100" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <a href="@Url.Action("TestMethod", "Deal")" class="links" title="plaat1" /><img src="../../Content/image1.jpg" hover="../../Content/image2.jpg" /></a>
        </td>
        <td>
          <a href="@Url.Action("logoff", "Logout")" class="links" title="Log Out" /><img src="../../Content/image2.jpg" hover="../../Content/image3.jpg" /></a>
        </td>
      </tr>
    </table>  
  </body>
</html>
于 2012-08-01T07:13:58.683 回答
0

嘿现在习惯了这个html代码

<table width="100" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td>
     <a href="@Url.Action("TestMethod", "Deal")" class="links" ><alt=""  title="plaat1"/></a>
   </td>
 </tr>
</table>
于 2012-08-01T04:23:35.123 回答