Question

我想创建一个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>

Answer 1

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

＆＃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;

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;

JavaScript的。图像翻转

1 个答案: