le MEMO du WEB développeur
 

••• Gestion des images sur son site Web •••   Liste des Mémos, astuces et bonnes pratiques

Modifier l'attribut src d'une image avec JQuery - JQuery

survolez cette image

JQuery permet grâce à la propriété attr, de modifier les attributs d'un éléments sur un événement donné.

Il est possible par exemple de changer en Jquery l'image affectée à l'élément <img /> en modifiant son attribut "src ".

Ici on affecte l'image monimage.jpg à l'élément img d'identifiant #mon_image :

$("#mon_image").attr('src','monimage.jpg');  

Exemple de modification d'une image au survol de la souris (événement hover) 

Code HTML :

<img id="mon_image" src="monimage2.jpg" alt="survolez cette image "/>

Code JQuery :

$("#mon_image").hover(
   function () {
     $(this).attr('src','monimage1.jpg');  
   },
   function () {
      $(this).attr('src','monimage2.jpg');  
   }
); 

 

publié le 22/05/2013 par Memo Web
Images
Commenter le Mémo :

Parcourir les images d'un répertoire en PHP - PHP
Apparition d'un élément en fondu avec JQuery sur le survol de souris - JQuery
Défilement continu horizontal ou vertical d'une bande d'images en javascript - Javascript
Afficher une image différente selon la date de l'année en javascript - JQuery
Créer un effet d'opacité sur le survol d'une image - Javascript
Centrer une image horizontalement - CSS
Aligner verticalement du texte avec une image - CSS
Empêcher le clic droit sur les images de votre site - Javascript
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos