Apparition en hover...

Plutot que de donner des propriétés css à l'image, crée les deux images telles que tu voudrais qu'elles soient. Mettont que celle par défaut s'appele "AAA.jpg" et que celle à afficher au survol soir "BBB.jpg".

Vu que l'on va utiliser la fonction "hover", on va devoir tricher un peu:
HTML:

<div class="mon_image"></div>

CSS:

      .mon_image
{
      background-image: urtl('AAA.jpg') no-repeat; /* On définis l'image souhaitée en arrière-plan */
      width: 314px; /* On donne la largeur pour être sur que l'image soit affichée en entier */
      height: 304px; /* La hauteur... */
}
      .mon_image:hover
{
      background-image: urtl('BBB.jpg') no-repeat; /* On définis l'arrière-plan du survol */
}

Voila, si je ne me suis pas trompé, ça marche.
En gros, du places une baliste factice, et via un code CSS, tu lui donne un arrière-plan en précisant sa hauteur et sa largeur (ceux de l'image, sinon elle sera rognée ou il y aura du vide autour).
Grâce au "hover", tu assignes un arrière-plan différant.

PS: Pour palier d'éventuels problemes de positionnement/déplacement; essaye ça:

      .mon_image
{
      text-align: center;
      vertical-align: center;
      background-position: center;
}

PS2: Dans le hover, n'écris que ce qui dois changer, pas besoin de repréciser inutilement le reste.

Merci c'est cool, mais ce n'est qu'une image d'exemple que j'ai donné, il y aura une vaingtaine d'images qui seront changées tous les mois, donc cette technique là n'est pas du tout pratique, il faudrait vraiment un code permettant de faire cet effet automatiquement

Ce sujet va être déplacer dans la section webmastering, il ne s'agit pas de programmation.