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は custom属性を使用します。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 に答える