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

4 pts
1 answer
Christophe GRABOWSKI on 7/2/21 at 5:57 PM

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)

Display all comments
Virgile Lossi on 7/2/21 at 6:31 PM

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 on 7/5/21 at 12:04 PM

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 on 7/5/21 at 12:16 PM

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 on 7/5/21 at 2:28 PM

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 on 7/5/21 at 5:09 PM

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... (Restricted access media)

Christophe GRABOWSKI on 7/5/21 at 5:15 PM

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 on 7/5/21 at 6:11 PM

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