[Résolu] Script pour changer d'image avec hover ne fonctionne pas

Bonjour, je suis bien perdue, j'explique. J'ai plusieurs images sur mon site qui changent avec un onmouseover et cela marche du tonnerre ! Seulement, j'ai appliqué un Content-Security-Policy strict à mon site et il n'aime pas du tout ce genre d’événement

Après moult essaie d'exceptions qui n'ont rien changé, j'ai essayé de changer mes onmouse par un script sur une page js à part, mais étant une quiche en js, je n'arrive pas à le faire marcher...

J'ai introduit mon script dans le header de la page index.php :

<script type="text/javascript" src="onmouse.js"></script>

J'ai mis mon image de base dans index.php :

<a href="grande_image.html"><img alt="flyer" class="class_img" src="chemin/chemin/image_de_base.webp" /></a>

J'ai créé mon script onmouse.js, je l'ai mis dans le même dossier que index.php :

$(document).ready(function(){
	$('.class_img').hover(
		function(){$(this).prop('src', "chemin/chemin/image_de_base.webp")}, 
  		function(){$(this).prop('src', "chemin/chemin/image_hover.webp")}
  	);
 });

Je n'ai que ça dans mon fichier js et je remplace '.class_img' par la classe de mon image de base et les "chemins/chemin......" par ceux de mes images, c'est tout. Manque-t-il quelque chose avant ou après ? Faut-il que je remplace "document" par quelque chose d'autre ?

Je m'excuse de ce long poste mais je n'y connais rien en js (je veux juste résoudre ce problème que je pensais résolu avec onmouseover) et je voulais être le plus explicite possible.

Je vous remercie de m'avoir lu, j'espère que vous pourrez m'aider

Bonjour,

Alors, effectivement il y a des moyens pour contourner le problème dû au Content-Security-Policy avec du js dans un fichier séparé, mais... vous ne pouvez pas juste faire un truc en CSS avec un :hover tout simple ? Parce que si les images changent, c'est plutôt de la présentation que du contenu, non ? Donc des images chargées via background-image, ce serait peut-être plus adapté dans votre situation...
Modifié par Olivier C (18 Jan 2021 - 18:53)

Tout est possible de nos jours, il n'y a pas forcément qu'une seule approche de valable. Néanmoins, dans ce cas de figure, je ferais quelque chose comme ceci, pour une seule image (si l'on reste dans l'idée qu'il s'agit d'images de présentation, et non de contenu) :

#uneIdSpecifique {
  background-image: url(//monsite.fr/imageDeBase.jpg);
}

#uneIdSpecifique:focus,
#uneIdSpecifique:hover,
#uneIdSpecifique:active {
  background-image: url(//monsite.fr/imageDeSurvol.jpg);
}

Ce n'est pas plus lourd que du js. Si ça ne concerne qu'une seule page il suffit d'isoler ce style et de l'appeler uniquement pour cette page.

Ah oui, justement, les images sont très importantes, au moins les images de base, car la personne pour qui je fais le site est graphiste et veut présenter son travail.

Si cela peut t'aider, mon site est gulgraph.com.

Pour le moment je mets mon image de base sur la page php (<a><img/></a>) et j'applique mon background au <a>

Selon toi c'est la meilleure solution ?

Merci de ton aide en tous cas, j'ai posté mon problème sur 3 forum et tu es le seul à me répondre

EDIT : J'ai utilisé la solution du Background je considère donc le problème comme résolu, merci beaucoup !
Modifié par Cendrine (18 Jan 2021 - 18:16)

Bonne continuation.