Discussion :

[luffyfr]

Bonjour à tous,
Dans ma page web, j'ai des images qui s'affichent utilisant la librairie CORNER.JS pour mettre un effet d'ombres et d'arrondi.

J'affiche une première image (image par défaut) et en dessous le reste d'images en plus petites. l'image par défaut est 3 fois plus grande que les petites.

Je cherche à faire en sorte que lorsque l'utilisateur passe sa souris sur une petite image, celle ci s'affiche a la place de la grande par défaut. si il quitte, l'image par défaut reprend sa place.

Ce qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<img src="image-def.png" name="ImgDef"/>
<img src="image-1-petite.png" onmouseover="document.ImgDef.src='image-1.png'" onmouseout="document.ImgDef.src="'image-def.png'"

Mais j'aimerais que l'image du onmouseover et onmouseout prenne en compte le code JS de CORNER afin d'obtenir les effets sur l'image car corner.js remplace la balise img par une balise canvas et cela plante le onmouseover du coup.

Je suis pas un grand expert en programmation JS, est ce possible de réaliser ceci ?

merci d'avance.

[Invité]

si corner.js utilise canvas il vaut mieux utiliser les proprietes du css3 border-radius et box-shadow