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

时间:2012-02-13 18:12:22

标签: javascript html

我正在观看视频教程,根据作者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>

6 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:2)

在第一个示例中,onmouseoveronmouseout事件绑定到<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';
}