Mettre une image à la place de connexion(menu)

[Adein]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://petit-poisson.forumactif.com/

Description du problème

Bonjour, j'espère que vous allez bien, pouvez vous m'aider svp!

j'ai un menu (navigation) en texte, je souhaite modifier ce texte en l'occurence "connexion" /login par un bouton (image)

j'ai essayé et échoué

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" id="navSIT">
            <tr><td id="M14_AvatarInvite"style="display:none;"><div class="avaSIT"><img src="https://www.aht.li/3160230/invite.png"/></div></td>
          <td><!-- BEGIN switch_user_logged_in --><div class="avaSIT"></div><div class="welcSIT"></div><!-- END switch_user_logged_in --></td></tr>
        <script type="text/javascript">$(function(){$('.avaSIT').html(_userdata.avatar);{$('.welcSIT').html( _userdata.username);}});</script>
        <tr><td class="navSIT" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td></tr>
        </table>  
      

a#login.mainmenu {
display:inline-block; vertical-align:middle;
 font-size:12px !important; content:url("https://www.aht.li/3170401/bouton-perspective-arret-icone-6487-32.png"); /* MODIFIABLE */}

.mainmenu[href="/login"]{content:url('https://www.aht.li/3171222/bouton-favoris-perspective--icone-7004-32.png');}

j'ai essayé ceci et d'autres  sans succès, je n'arrive pas à trouver le code css qui le relie.

est ce possible avec css ou faut t'il du JS ?

merci à vous, bonne journée.

[Adein]

Mmm personne a une idée

[demeter1]

Bonjour,
si on analyse le bouton connexion, il y a déjà un bouton d'affilié qui est généré par ce css

Code:

.mainmenu[href="/login"] {
    background: url(https://www.aht.li/3171222/bouton-favoris-perspective--icone-7004-32.png);
}

La portion analysée

Code:

<a class="mainmenu" href="/login" rel="nofollow"><img id="i_icon_mini_login" src="https://www.aht.li/3170404/bouton-perspective-veille--icone-6392-32.png" border="0" height="13" hspace="2" alt="Connexion" title="Connexion">Connexion</a>

Vu que les autres boutons sont en empty gif, il suffirait de supprimer cette ligne de css

Code:

background: none!important; */

dans #navSIT a pour que le bouton réapparaisse.

[Adein]

Bonsoir demeter, merci pour ta réponse, en effet cela fonctionne, par contre une partie du problème consiste à supprimer le texte connexion, j'ai le bouton mais je dois supprimer le texte sans faire disparaitre le bouton

j'ai essayé ceci

Code:

$(function() {
    $('a.mainmenu[href^="/login"]').text('.');
    });

sans effet

il doit y avoir une erreur dans le code car cela ne fonctionne pas

Si tu as quelques chose à proposer.

c'est étrange car pour le bouton déconnexion ceci fonctionne

Code:

a#logout.mainmenu::after {
display:inline-block; vertical-align:middle;
font-size:12px !important; content:url("https://www.aht.li/3170401/bouton-perspective-arret-icone-6487-32.png"); /* MODIFIABLE */

}

il n'y a pas quelque chose de similaire avec le login ?

cordialement, merci encore!

[Adein]

MM j'ai trouvé et résolu mon problème, merci demeter pour ton aide, sujet résolu

[Cloo]

Ce serait intéressant de savoir comment tu l'as résolu, pour ceux qui auraient le même problème un jour

[Adein]

pour trouver le sélecteur css, il faut aller dans l'examinateur d'élément, clique droit sur l'élément en question et copier le sélecteur css puis coller dans le css. et ajouter le css voulu