Plusieurs méthodes d'implémentation de onmouseover et onmouseout pour changer d'image lorsque la souris entre et sort

Cet article vous présente plusieurs méthodes d'implémentation de onmouseover et onmouseout pour changer d'image lorsque la souris entre et sort. Il a une certaine valeur de référence. J'espère que cela vous sera utile.

Il est très courant de déplacer la souris vers l'intérieur et l'extérieur pour changer d'image, parlons donc de la façon de la mettre en œuvre :

La première méthode, qui est aussi la plus simple, peut être implémentée en html

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

Premièrement une image par défaut, puis écrivez l'image pour entrer et sortir.

La deuxième méthode, le remplacement js

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

Écrivez la méthode de remplacement de l'image en js et appelez-la en html.

Si vous n'utilisez pas onmouseover et onmouseout, vous pouvez également écrire comme ceci

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

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

Ces trois méthodes peuvent obtenir l'effet de déplacer la souris vers l'intérieur et l'extérieur du photo. N'est-ce pas très simple ? Vous pouvez essayer !

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique JavaScript

Manuel JavaScript en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!