图片翻转由<img>和<a>事件

Question

我一直在看视频教程根据作者代码＃2应该使用，但相反，我改变了一点点代码＃1 那么在两个代码的区别是什么在这里执行相同的任务，任何技术或良好的做法？

CODE＃1： 用于事件处理器鼠标悬停和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> 

CODE＃2： 用于事件处理器鼠标悬停和鼠标移开标签

<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

的在第一个例子，onmouseover和onmouseout事件绑定到<img>标记，因此在<img>内部进行激活即可激活它们。在第二个示例中，它们绑定到包含<img>的标签<a>。

对于您的两个示例，结果将是相同的，因为<img>是<a>标记中唯一的元素。

然而，如果更多的文字被列入<a>标签内，并绑定到<img>的事件而已，将鼠标移至文本时不会发生翻转效果。

例如：

<a href="http://www.google.com" > 
    This is some text explaining the image. If you mouse over it, the rollover won't change. 
    <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> 

<a href="http://www.google.com" 
    onmouseover="document.arrow.src='images/arrow_on.gif'" 
    onmouseout="document.arrow.src='images/arrow_off.gif'"> 
    This is some text explaining the image. If you mouse over it, the rollover WILL change. 
    <img src="images/arrow_off.gif" width="147" height="82" 
      name="arrow" alt="arrow" /> 
</a> 

Answer 2

如果里面有<a>没有格式化或附加内容，您可以使用，它不会有所作为。

如果链接中存在CSS格式或附加内容，则<a>的边界可能与img的边界不同。在这种情况下，它取决于实际的意图：只有当鼠标悬停图像或悬停链接的其余部分时才想更改图像源。

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

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

在这里使用'inline 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

第三，我想指出的是，属性“名称”不是任何那些有效的属性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'; 
}