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

Voici une fonction JQuery qui donne un effet sympathique sur le survol d'une image, dans cet exemple, lorsque celle çi est associée à un lien .
L'image est rendu légèrement transparente au survol de la souris.
Alternative plus classe à l'ajout de bordure à l'image sur le hover !

Code HTML :

<a href="#">
  <img src="img/image2.jpg" alt ="effet sur survol de l'image'/>
</a>

Code JQuery : Evénement sur le survol de toutes les  images associées à un lien

 $('a img').hover(
   function(){ $(this).stop().animate({ opacity : '.75' }); },
   function(){ $(this).stop().animate({ opacity : '1' }); }
  );

 

publié le 31/07/2012 par Memo Web
Images
Commenter le Mémo :

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