onmouseover sur image

Bonjour,

j'aimerai savoir s'il est possible de faire un changement d'image à la volée lorsque je passe la souris dessus ?

j'ai essayé d'ajouter le code HTML dans un wysiwyg, mais ça ne marche pas :D (avec les bons liens d'images bien sur)

<img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'"

 

Merci :)

Virgile Lossi le 02/07/21 à 17:44
4 pts
1 réponse
Christophe GRABOWSKI le 02/07/21 à 17:57

Bonjour Virgile,

ça fonctionne pour nous comme ceci

<img src="plugins/CCPC18Arkadia30/images/image-Pole1/img_Arkadia_ProjetPole.png"
   onmouseover="this.src='plugins/CCPC18Arkadia30/images/img_Arkadia_enConstruction.png'" 
   onmouseout="this.src='plugins/CCPC18Arkadia30/images/images-Accueil/img_Arkadia_RevueDeProjet.png'" 
   class="img-size hidden-sm">

pour ma part j'enleverai le / devant le lien des images (à moins que celle-ci soit bien à la racine de ton site)

Afficher toutes les remarques
Virgile Lossi le 02/07/21 à 18:31

en effet ça m'affiche l'image maintenant, mais dès que j'ajoute un onmouseover dans le code source, il est supprimé par le wysiwyg.. comme si le code html était corrigé automatiquement.
Il doit manquer un truc... (je suis en 10SP4)
Merci de la réponse en tout cas :)

Christophe GRABOWSKI le 05/07/21 à 12:04

alors j'avais mal lu ta question, notre action ne se fait pas dans une portlet WISYWIG, il ne me semble pas que tu puisses le faire comme ça.

Pour notre part, c'est intégré dans une jsp intégré dans un module.

Virgile Lossi le 05/07/21 à 12:16

ah zut, je n'ai pas accès aux JSP (ni au serveur), je cherchais un moyen pur wysiwyg, qui soit ainsi accessible par les utilisateurs ;)

Merci tout de même pour la réponse.

Christophe GRABOWSKI le 05/07/21 à 14:28

J'ai une solution pour toi,

tu définis dans ta portlet WISYWIG une class "monMenu"

et ensuite via la paramètrage du site, dans Présentation - feuilles de styles CSS

tu fais ton rollover en css

#monMenu a:hover { 
background-image:url(images/gris_anim.gif);
background-repeat:no-repeat;
}
Virgile Lossi le 05/07/21 à 17:09

Merci beaucoup mais j'ai beau chercher, mais ni dans l'admin du site ni dans celle d'un espace, je ne vois "Présentation" et où je pourrais définir cette classe CSS.

Je crains d'avoir atteint mes limites en JCMS et CSS... (Média en accès restreint)

Christophe GRABOWSKI le 05/07/21 à 17:15

il y a une ACL super administrateur fonctionnel qui permet de voir cette possibilité, il faut l'affecter à un groupe et que tu appartiennes à ce groupe.

ensuite dans le bouton des apps, tu vas avoirs un bouton de paramétrages (un rond bleu avec des curseurs)

Virgile Lossi le 05/07/21 à 18:11

Merci, j'avais le droit mais pas l'application.
j'ai donc ajouté la classe, mais ça ne veut pas fonctionner, et puis surtout c'est pas vraiment user-friendly, ct juste pour faire un POC, merci ;)

j'ai essayé de faire de l'ultra simple:

#monMenu a:hover { 
  background-color: gold;
}

et dans le bloc wysiwyg


<a class="monMenu"

Mais non, encore raté :D

1 pt