Question

我正在观看视频教程，根据作者CODE＃2应该使用，但我把它改为CODE＃1 那么两个代码的区别是什么，都执行相同的任务，这里有任何技术或良好实践吗？

代码＃1： 使用标记

的事件处理程序MouseOver和MouseOutof

<a href="http://www.google.com" > 
    <img alt="arrow" name="ArrowImage" 
         onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
         onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
         src="Images/arrow_off.gif" />
</a>

代码＃2： 使用标记

的事件处理程序MouseOver和MouseOut

<a href="http://www.google.com" 
   onmouseover="document.arrow.src='images/arrow_on.gif'"
   onmouseout="document.arrow.src='images/arrow_off.gif'">
     <img src="images/arrow_off.gif" width="147" height="82" 
          name="arrow" alt="arrow" />
</a>

Answer 1

如果<a>中没有格式或其他内容，您可以使用其中一种，但它不会产生任何影响。

如果链接中有CSS格式或其他内容，<a>的边界可能与img的边界不同。在这种情况下，它取决于实际意图：您是仅在悬停图像时还是在悬停链接的其余部分时更改图像源。

但是，因为您要求良好做法：建议不要使用内联JavaScript，即不要混用HTML和JavaScript。在应用良好实践时，您可能会在HTML文档底部的单独<script>中捕获鼠标事件，或使用CSS :hover伪类定义样式。

Answer 2

在第一个示例中，onmouseover和onmouseout事件绑定到<img>标记，因此在<img>内部鼠标会激活它们。在第二个示例中，它们绑定到包含<a>的{{1}}标记。

对于您的两个示例，结果将完全相同，因为<img>是<img>代码中唯一的元素。

但是，如果<a>标记中包含更多文本且仅绑定到<a>的事件，则鼠标悬停在文本上时不会发生翻转效果。

例如：

<img>

Answer 3

要么工作正常。这是你想要做的事情。

例如，如果您也有文字，则选择选项2，因为文本将在<img>之后和</a>之前。

通常，您希望远离绑定直接绑定到图像，因为您通常最终希望在该图像上放置更多内容（例如文本或其他容器）。

Answer 4

是1992年的视频吗？

您可以单独使用CSS实现翻转效果，这要好得多，例如

a#rollover {
   background: url("normal.jpg") no-repeat 0 0;
}

a#rollover:hover {
   background: url("rollover.jpg") no-repeat 0 0;
}

更好的是，您可以将这两种状态作为单个图像，只需更改悬停时的背景位置，如here所述。

如果您想使用JavaScript更改图片来源，则a）使用unobtrusive JavaScript，b）使用jQuery以增加简洁性。

Answer 5

在这里使用“内联javascript”通常不是一种好的做法。这使得代码非常难以阅读，并且从长远来看不易维护。使用在单独的javascript文件中定义的不显眼的javascript是可行的方法。使用jquery的示例如下：

// defined in application.js for example:

$("img").hover(function onmouseover(){
    $(this).attr("src", "Images/arrow_on.gif");
}, function onomouseout(){
    $(this).attr("src", "Images/arrow_off.gif");
});

就两种方法之间的差异而言，唯一的区别在于事件被触发的点。第一个导致事件在用户将鼠标悬停在图像上时触发，而第二个在用户将鼠标悬停在锚点上时发生。根据它的样式，锚点可以占据比图像本身更大的区域，因此在两者之间进行选择取决于您想要产生的效果。

就“良好做法”而言，此示例实际上是对javascript的错误使用，换句话说，您可以使用CSS Sprites完成相同的操作。

例如，CSS：

/* use a more specific selector in your actual code */
a {
  /* on state */
  background: url(Images/arrow.gif) no-repeat 0 0;
}
a:hover {
  /* default state */
  background: url(Images/arrow.gif) no-repeat -50px 0;
}

Answer 6

首先，翻转图像通常使用CSS

完成

请参阅devdigital的答案。

其次，如果您要按照代码中的方式使用JavaScript，请参阅Michael的示例

第三，我想注意，属性“name”不是HTML5中任何一个元素的有效属性，而不是img元素的读取：HTML4。

最后，使用JS执行此操作的首选方法是：

HTML：

<a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a>

JS：

var atag =  document.getElementById('rollover');

atag.onmouseover = function() {
    document.getElementById('rolloverimage').src = 'rollover.jpg';
}

atag.onmouseout = function() {
    document.getElementById('rolloverimage').src = 'image.jpg';
}

<img/>和<a> events</a>的图片展开

6 个答案: