使用MouseOver更改图像
[英]Change image with MouseOver
问题描述
I'm new to javascript and Html , Typed a code that changes the image when the mouse hovers over, it works but i was wondering if there is any better solution because it is very long and repetitive ; 
我是javascript和Html的新手，键入了当鼠标悬停时会更改图像的代码，它可以工作，但是我想知道是否有更好的解决方案，因为它很长且重复； Here is the code : 这是代码：
<doctype html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<img src="image1.jpg" height="200px" width="300px"
onmouseover="rollover(this)" onmouseout="mouseaway(this)/>
</td>
<td>
<img src="image2.jpg" height="200px" width="300px"
onmouseover="rollover1(this)" onmouseout="mouseaway1(this)"/>
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" height="200px" width="300px"
onmouseover="rollover2(this)" onmouseout="mouseaway2(this)"/>
</td>
<td>
<img src="image4.jpg" height="200px" width="300px"
onmouseover="rollover3(this)" onmouseout="mouseaway3(this)"/>
</td>
</tr>
</table>
<script language="javascript">
function rollover(img1)
{
img1.src = 'image2.jpg';
}
function mouseaway(img1)
{
img1.src = "image1.jpg";
}
function rollover1(img2)
{
img2.src='image3.jpg';
}
function mouseaway1(img2)
{
img2.src='image2.jpg'
}
function rollover2(img3)
{
img3.src='image4.jpg';
}
function mouseaway2(img3)
{
img3.src='image3.jpg'
}
function rollover3(img4)
{
img4.src='image1.jpg';
}
function mouseaway3(img4)
{
img4.src='image4.jpg'
}
</script>
</body>
</html>
4 个解决方案
解决方案1
3 2017-03-29 04:28:10
简单的答案是：
<img onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" height="200px" width="300px" src="image1.jpg">
解决方案2
2 已采纳 2017-03-29 04:29:14
You want to make one function and give them an argument as to which image to display. 您想做一个功能，并给他们一个参数来显示要显示的图像。 Something like this: 像这样：
function rollover(img, src) {
img.src = src
}
Then call the same function on over and out: 然后反复调用相同的函数：
<img src="image4.jpg" height="200px" width="300px"
onmouseover="rollover(this,'image1.jpg')" onmouseout="rollover(this,'image4.jpg')"/>
This is even easier if you load a library such as jquery. 如果加载诸如jquery之类的库，这甚至会更加容易。 Here's an example using it. 这是一个使用它的例子。 You don't even have to have the events repeated. 您甚至不必重复事件。 Just give each image a class 只需给每个图像一个类
<img src="image4.jpg" class="rollover">
Then assign events using the class name (classes are identified by the leading . ) 然后使用类名称分配事件（类由前导.标识. ）
$(document).ready( function() {
$('.rollover').mouseover( function(e) {
this.old_src = this.src; // remember what the old src was
this.src = 'image1.jpg';
});
$('.rollover').mouseout( function(e) {
this.src = this.old_src;
});
});
You wrap it in $(document).ready(...) to ensure the page has loaded before the events are attached. 您将其包装在$(document).ready(...)以确保在附加事件之前已加载页面。
解决方案3
1 2017-03-29 04:37:56
All the above answers are good. 以上所有答案都是好的。 I just want to add you could also use data-* attributes. 我只想添加，您也可以使用data- *属性。
<img src="image1.jpg" height="200px" width="300px" onmouseover="rollover(this)" onmouseout="mouseaway(this)" data-hover-img="image1.jpg" data-normal-img="image2.jpg" />
In JS: 在JS中：
function rollover(img)
{
img.src = this.dataset.hoverImg;
}
function mouseaway(img)
{
img.src = this.dataset.normalImg;
}
解决方案4
0 2017-03-29 04:37:17
You could store all the information required in each image tag, that way you wouldn't have to create extra functions for each one. 您可以在每个图像标签中存储所有必需的信息，这样就不必为每个图像标签创建额外的功能。
For example 例如
document.addEventListener('DOMContentLoaded', () => { Array.from(document.querySelectorAll('img[data-src-enter]')).forEach(img => { img.setAttribute('data-src-out', img.src) img.addEventListener('mouseenter', () => { img.src = img.getAttribute('data-src-enter') }, false) img.addEventListener('mouseout', () => { img.src = img.getAttribute('data-src-out') }, false) }) })
<p> <img src="http://lorempixel.com/50/50/cats/1/" data-src-enter="http://lorempixel.com/50/50/cats/2/"> </p> <p> <img src="http://lorempixel.com/50/50/cats/3/" data-src-enter="http://lorempixel.com/50/50/cats/4/"> </p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.