Changement de la source d'image au survol à l'aide de jQuery
J'ai quelques images et de leur survol de l'image. À l'aide de jQuery, je veux afficher/masquer l'image de survol lorsque le onmousemove/onmouseout événement de se produire. Tous mes image noms suivent le même modèle, comme ceci:
Image D'Origine:
Image.gif
Image De Survol:
Imageover.gif
Je veux insérer et retirer la "plus" partie de la source de l'image dans le onmouseover et onmouseout cas, respectivement.
Comment puis-je le faire à l'aide de jQuery?
- J'ai écrit un petit how-to, avec des exemples pour les débutants, Modifier l'image avec JavaScript (jQuery). Il y a aussi un exemple sans l'aide de jQuery.
- Changement de l'image à la souris dotnetspeaks.com/DisplayArticle.aspx?ID=89
- Juste ce que je cherche. Merci pour l'affichage de la Question!
- J'ai un problème comme celui-ci(Ma Question). La réponse à cette question est grande, mais dans IE9 chaque fois que tu va sur le bouton, il y a demande supplémentaire pour l'image et c'est très mauvais. Est tout corps a une meilleure réponse?
Vous devez vous connecter pour publier un commentaire.
De prêt:
Pour ceux qui utilisent des url de l'image sources:
over
quelque part d'autre dans l'URI.Je sais que vous vous posez sur l'utilisation de jQuery, mais vous pouvez obtenir le même effet dans les navigateurs qui ont JavaScript désactivé à l'aide de CSS:
Il y a une description plus ici
Encore mieux, cependant, est d'utiliser des sprites: simple-css-image-roulement
Si vous avez plus d'une image et vous avez besoin de quelque chose de générique, qui ne dépend pas d'une convention d'affectation de noms.
HTML
JavaScript
Une solution générique qui ne vous limite pas à ce "image" et "l'image" ne peut être d'ajouter le "onmouseover" et "onmouseout" balises pour le code HTML lui-même.
HTML
JavaScript
En fonction de votre configuration, peut-être quelque chose comme ce serait mieux travailler (et nécessite moins de HTML de modification).
HTML
JavaScript /jQuery
Vous pouvez modifier la catégorie d'images à partir de la première ligne. Si vous avez besoin de plus les classes d'image (ou autre chemin d'accès), vous pouvez utiliser
et ainsi de suite.
Il doit travailler, je n'ai pas le tester 🙂
J'espérais un über un liner comme:
Si la solution que vous cherchez est un bouton animé, alors le mieux que vous pouvez faire pour améliorer les performances de la combinaison de sprites CSS. Un sprite est une image énorme qui contient toutes les images de votre site (en-tête, logo, boutons, et toutes les décorations que vous avez). Chaque image que vous avez utilise une requête HTTP, et le plus de requêtes HTTP le plus de temps prendra pour charger.
La
0px 0px
coordonnées du coin supérieur gauche de votre sprites.Mais si vous développez une photo de l'album avec Ajax ou quelque chose comme ça, puis JavaScript (ou un cadre) est le meilleur.
Amusez-vous!
Tandis que la recherche d'une solution quelque temps, j'ai trouvé un script similaire à ci-dessous, qui, après quelques réglages j'ai eu de travailler pour moi.
Il gère deux images, que presque toujours par défaut est "off", où la souris est en dehors de l'image (image-example_off.jpg), et à l'occasion, "sur", où, pour la fois que la souris est a plané, l'image alternative (image-example_on.jpg) est affiché.
J'ai fait quelque chose comme le code suivant 🙂
Il ne fonctionne que lorsque vous avez un second fichier nommé avec _hover, par exemple,
facebook.png
etfacebook_hover.png
Adapté de Richard Ayotte du code de
Pour cibler une img dans un ul/li liste (trouvé via le wrapper div class ici), quelque chose comme ceci: