JavaScript的。图像翻转

时间:2016-11-12 04:26:17

标签: javascript html5

我想创建一个java脚本代码,这样当我将鼠标移动到显示的三个图像之一时,当前图像将被新图像替换。 第一:我想为图像元素的鼠标输入事件创建一个事件处理程序。我希望这个处理程序更改图像元素的src属性,使其指向翻转图像的URL。 第二:我必须写一个鼠标输出事件。此处理程序应将images元素的src属性返回到原始图像

这是html代码。

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Image Rollovers</title>
	<link rel="stylesheet" href="main.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>	
    <script src="rollover.js"></script>
</head>
	
<body>
	<section>
		<h1>Ram Tap Combined Test</h1>
		<ul id="image_rollovers">
	    	<li><img src="images/h1.jpg" alt="" id="images/h4.jpg"></li>
	    	<li><img src="images/h2.jpg" alt="" id="images/h5.jpg"></li>
	    	<li><img src="images/h3.jpg" alt="" id="images/h6.jpg"></li>
	    </ul>        
	</section>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

使用CSS执行此操作会更干净:

&#13;
&#13;
#img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-image: url("https://placebear.com/200/200");
}

#img:hover {
  background-image: url("http://placekitten.com/200/200");
}
&#13;
<div id="img"></div>
&#13;
&#13;
&#13;

但是如果你真的想使用事件监听器方法:

&#13;
&#13;
var img = document.querySelector('img');

img.addEventListener('mouseover', function() {
  this.src = "https://placekitten.com/200/200"
})

img.addEventListener('mouseout', function() {
  this.src = "https://placebear.com/200/200"
})
&#13;
img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
&#13;
<img src="https://placebear.com/200/200">
&#13;
&#13;
&#13;