我正在观看视频教程,根据作者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>
答案 0 :(得分:3)
如果<a>
中没有格式或其他内容,您可以使用其中一种,但它不会产生任何影响。
如果链接中有CSS格式或其他内容,<a>
的边界可能与img
的边界不同。在这种情况下,它取决于实际意图:您是仅在悬停图像时还是在悬停链接的其余部分时更改图像源。
但是,因为您要求良好做法:建议不要使用内联JavaScript,即不要混用HTML和JavaScript。在应用良好实践时,您可能会在HTML文档底部的单独<script>
中捕获鼠标事件,或使用CSS :hover
伪类定义样式。
答案 1 :(得分:2)
在第一个示例中,onmouseover
和onmouseout
事件绑定到<img>
标记,因此在<img>
内部鼠标会激活它们。在第二个示例中,它们绑定到包含<a>
的{{1}}标记。
对于您的两个示例,结果将完全相同,因为<img>
是<img>
代码中唯一的元素。
但是,如果<a>
标记中包含更多文本且仅绑定到<a>
的事件,则鼠标悬停在文本上时不会发生翻转效果。
例如:
<img>
答案 2 :(得分:1)
要么工作正常。这是你想要做的事情。
例如,如果您也有文字,则选择选项2,因为文本将在<img>
之后和</a>
之前。
通常,您希望远离绑定直接绑定到图像,因为您通常最终希望在该图像上放置更多内容(例如文本或其他容器)。
答案 3 :(得分:1)
是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以增加简洁性。
答案 4 :(得分:1)
在这里使用“内联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;
}
答案 5 :(得分:1)
首先,翻转图像通常使用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';
}