Several implementation methods of onmouseover and onmouseout to switch pictures when the mouse moves in and out

This article introduces to you several implementation methods of onmouseover and onmouseout to move the mouse in and out to switch pictures. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

It is very common to move the mouse in and out to switch images, so let’s talk about how to implement it:

The first method, which is also the simplest one, can be implemented in html

<img class="img" src="img/dongtai.png" onmouseover="this.src=&#39;img/HBuilder.png&#39;" onmouseout="this.src=&#39;img/dongtai.png&#39;"/>

First default a picture, and then write the picture to move in and out.

The second method, js replacement

<img name="image1" src="img/dongtai.png" onmouseover="mouseOver()" onmouseout="mouseOut()" />

function mouseOver() {
	document.image1.src = "img/HBuilder.png"
}

function mouseOut() {
	document.image1.src = "img/dongtai.png"
}

Write the method of replacing the image in js and call it in html.

If you don’t use onmouseover and onmouseout, you can also write like this

<p class="bg"></p>

.bg{background: url(img/HBuilder.png) no-repeat;height: 300px;}
.bg:hover{background: url(img/dongtai.png) no-repeat;}

These three methods can achieve the effect of moving the mouse in and out of the picture. Isn’t it very simple? You can try it!

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial!

Related recommendations:

php public welfare training video tutorial

JavaScript graphic tutorial

JavaScriptOnline Manual

The above is the detailed content of Several implementation methods of onmouseover and onmouseout to switch pictures when the mouse moves in and out. For more information, please follow other related articles on the PHP Chinese website!