Question

我是javascript和Html的新手，输入一个代码，当鼠标悬停时会改变图像，它可以工作，但我想知道是否有更好的解决方案，因为它非常长且重复; 这是代码：

<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>

Answer 1

简单的答案是：

<img onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'" height="200px" width="300px" src="image1.jpg">

Answer 2

您想制作一个函数，并为它们提供一个关于要显示哪个图像的参数。像这样：

function rollover(img, src) {
   img.src = src
}

然后在over-out上调用相同的函数：

<img src="image4.jpg" height="200px" width="300px" 
onmouseover="rollover(this,'image1.jpg')" onmouseout="rollover(this,'image4.jpg')"/>

如果加载诸如jquery之类的库，这会更容易。这是使用它的一个例子。你甚至不必重复这些事件。只需给每个图像一个类

<img src="image4.jpg" class="rollover">

然后使用类名称分配事件（类由前导.标识）

$(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;
     });
});

将其包装在$(document).ready(...)中以确保在附加事件之前已加载页面。

Answer 3

以上所有答案都很好。我只想添加你也可以使用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" />

在JS中：

function rollover(img)
{

     img.src = this.dataset.hoverImg;


 }
function mouseaway(img)
{

   img.src = this.dataset.normalImg;

}

Answer 4

您可以存储每个图片代码中所需的所有信息，这样您就不必为每个图片代码创建额外的功能。

例如

＆＃13;

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)
  })
})

＆＃13;

<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>

＆＃13;

使用MouseOver更改图像

4 个答案: