Image qui change au passage de la souris

par Phyliono Ven 2 Oct 2015 - 20:44

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.universiteuniverselle.com

Description du problème

Bonjour,

J'ai un problème. Je voudrais que lorsque la souris passe sur le bouton Messagerie, elle affiche cette image : https://i.servimg.com/u/f21/17/44/20/01/messag13.png comme pour Administration, Réglages et Déconnexion qui fonctionnent très bien.

En effet, l'image Messagerie fonctionne avec un javascript.

Voici le code javascript :

Code:: jQuery(document).ready(function () { if(!$("#i_icon_mini_new_message").length) return; jQuery('#message_nb').append('<div id="new_message" style="display:inline"><a href="/privmsg?folder=inbox"><img src="http://i21.servimg.com/u/f21/17/44/20/01/messag11.gif"/></a></div>') }); jQuery(document).ready(function () { if($("#i_icon_mini_new_message").length) return; jQuery('#message_nb').append('<div id="no_new_message" style="display:inline" onClick="cook_no_new_message();return true;"><a href="/privmsg?folder=inbox"><img src="http://i21.servimg.com/u/f21/17/44/20/01/messag11.png" /></a></div>') });

Code du widget :

Code::  <table class="forumline" border="0" cellspacing="1" cellpadding="0" style="width: 100%;"> <tbody> <tr> <td class="widgetitle" style="height: 28px;"> <span class="genmed module-title">{USER LINK}</span> </td> </tr> <tr style="height: 7px;"> <td> </td> </tr>  <tr> <td align="left" class="widgetcontenu"> <div align="center"> <img src="http://www.habbo.fr/habbo-imaging/avatarimage?user={USER&#8288;NAME}" /><br /><br /> </div> <div align="center"> <table class="widgetbouton"> <tbody> <tr> <td> <div align="center"> <a target="_blank" href="/admin"><img onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/admini12.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/admini13.png'" class="admin" src="http://i21.servimg.com/u/f21/17/44/20/01/admini12.png" /></a><span id="message_nb"></span><br /><a href="/profile?mode=editprofile"><img onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ryglag11.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/ryglag12.png'" class="reglages" src="http://i21.servimg.com/u/f21/17/44/20/01/ryglag11.png" /></a><br /><a href="/login?logout"><img onmouseout="this.src='http://i21.servimg.com/u/f21/17/44/20/01/dyconn11.png'" onmouseover="this.src='http://i21.servimg.com/u/f21/17/44/20/01/dyconn12.png'" class="deconnexion" src="http://i21.servimg.com/u/f21/17/44/20/01/dyconn11.png" /></a> </div> </td> </tr> </tbody> </table><br /> </div> </td> </tr> </tbody> </table>

Merci d'avance!

par Phyliono Lun 5 Oct 2015 - 13:41

par Phyliono Mar 6 Oct 2015 - 19:45

par Phyliono Jeu 8 Oct 2015 - 20:13

par Phyliono Ven 9 Oct 2015 - 22:51

par Phyliono Lun 12 Oct 2015 - 10:12

par Phyliono Jeu 15 Oct 2015 - 19:00

par MasDan Jeu 15 Oct 2015 - 19:37

Bonjour Phyliono,

Il s'agit de modifier votre balise IMG pour y insérer les attribut onmouseover et onmouseout.

Remplacer votre javascript par le code suivant

Code:: jQuery(document).ready(function (){ if($("#i_icon_mini_new_message").length){ jQuery('#message_nb').append('<div id="new_message" style="display:inline"><a href="/privmsg?folder=inbox"><img src="http://i21.servimg.com/u/f21/17/44/20/01/messag11.gif" onmouseover="this.scr=\'http://i21.servimg.com/u/f21/17/44/20/01/messag13.png\'"onmouseout="this.src=\'http://i21.servimg.com/u/f21/17/44/20/01/messag11.gif\'"</a></div>') } else { jQuery('#message_nb').append('<div id="no_new_message" style="display:inline" onClick="cook_no_new_message();return true;"><a href="/privmsg?folder=inbox"><img src="http://i21.servimg.com/u/f21/17/44/20/01/messag11.png"onmouseover="this.src=\'http://i21.servimg.com/u/f21/17/44/20/01/messag13.png\'"onmouseout="this.src=\'http://i21.servimg.com/u/f21/17/44/20/01/messag11.png\'"/></a></div>') } });