JQUERY Change Image sur volant

Une fonctionnalité vraiment cool de jQuery est la possibilité de changer une image dynamiquement, comme lorsque vous déplacez la souris sur une certaine zone de l'écran, une image changera. Comment vous le faites: vous faites référence à la propriété SRC de l'image et la modifiez via 2 fonctions. La première fonction modifie l'image et la seconde le modifie. Ensuite, dans le HTML, nous ajoutons un événement à la zone que la souris déclenchera les fonctions (notez que ces déclencheurs pourraient également être ajoutés au javascript). Aussi simple que ça. Voir la démo en direct

jQuery change d'image dynamiquement

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>	<span>//alert("open");
</span>	<span>var name_element = $('#twitter-image'); 
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>	<span>//alert("closed");
</span>	<span>var name_element = $('#twitter-image');
</span>	name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

Ce qui suit va dans le HTML:

Les questions fréquemment posées sur les effets de survol de jQuery Image

Comment puis-je utiliser jQuery pour modifier une image sur Hover?

pour changer une image sur le plan en utilisant jQuery, vous devez utiliser la méthode Hover (). Cette méthode spécifie deux fonctions à exécuter lorsque le pointeur de souris plane sur les éléments sélectionnés. La première fonction est exécutée lorsque la souris entre dans l'élément HTML et la deuxième fonction est exécutée lorsque la souris laisse l'élément HTML. Voici un exemple simple:

$ (document) .ready (function () {
$ ("img"). Hover (function () {
$ (this) .attr ("src", "image2.jpg");
}, function () {
$ (this) .attr ("src", "image });
});
Dans cet exemple, lorsque vous survolez une image, il se transforme en «image2.jpg». Lorsque vous éloignez la souris, il revient en «image1.jpg».

Puis-je utiliser CSS au lieu de jQuery pour changer une image sur volant?

Oui, vous pouvez utiliser CSS pour changer une image sur le plan. Cela peut être fait en utilisant: Hover pseudo-classe. Voici un exemple:

img: hover {
contenu: url ('image2.jpg');
}
Dans cet exemple, lorsque vous survolez une image, il se transforme en «image2.jpg». Cependant, cette méthode ne fournit pas de moyen de changer l'image lorsque la souris quitte l'image. Pour cette fonctionnalité, vous devez utiliser JavaScript ou jQuery.

Comment puis-je modifier l'image sur le plan pour un Div différent en utilisant jQuery?

Pour modifier l'image sur le plan pour une méthode Div différente, vous pouvez utiliser la méthode Hover () en combinaison avec la méthode find (). La méthode find () renvoie les éléments descendants de l'élément sélectionné. Voici un exemple:

$ (document) .ready (function () {
$ ("# div1"). Hover (function () {
$ ("# div2"). Find ("img"). Att ("src", "image2.jpg");
}, function () {
$ ("# div2"). find ("img"). att ("src", "image1.jpg");
});
});
Dans cet exemple, lorsque vous survolez "Div1", l'image dans "Div2" se transforme en "image2.jpg". Lorsque vous éloignez la souris de «div1», l'image dans «div2» revient en «image1.jpg».

Comment puis-je modifier l'image sur le plan de survol d'un élément de liste à l'aide de jQuery?

Pour modifier l'image sur le plan pour un élément de liste, vous pouvez utiliser la méthode Hover () en combinaison avec la méthode des enfants (). La méthode des enfants () renvoie tous les enfants directs de l'élément sélectionné. Voici un exemple:

$ (document) .ready (function () {
$ ("li"). Hover (function () {
$ (this) .children ("img"). Att ("src", "image2.jpg");
}, function () {
> $ (this) .children ("img"). attr ("src", "image1.jpg");
});
});
Dans cet exemple, lorsque vous survolez un élément de liste, l'image enfant de cet élément de liste change en "image2.jpg". Lorsque vous éloignez la souris de l'élément de liste, l'image de l'enfant revient en ‘Image1.jpg’.

Comment puis-je ajouter un effet de transition lorsque l'image change sur le plan de survol en utilisant jQuery?

pour ajouter une effet de transition lorsque l'image change sur Hover, vous pouvez utiliser les méthodes Fadein () et Fadeout (). Ces méthodes modifient progressivement l'opacité pour les éléments sélectionnés de caché à visible (fadein) et de visible à caché (fadeout). Voici un exemple:

$ (document) .ready (function () {
$ ("img"). Hover (function () {
$ (this) .fadeout (500, function () {
$ (this) .attr ("src", "image2.jpg"). function () {
$ (this) .fadeout (500, function () {
$ (this) .attr ("src", "image1.jpg"). fadein (500);
});
});
});
dans cet exemple, lorsque vous faites de Ensuite, lorsque vous éloignez la souris, elle s'estompe, revient en «image1.jpg», puis s'estompe. Le nombre 500 représente la durée de l'effet en millisecondes.

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!