[Résolu] bouton qui ne veux pas apparaître - Hover

Bonjour,

dans un premier temps je tenais à remercier florent verschelde car c'est grâce à lui que j'ai connu ce forum car dernièrement je me suis formé à l'HTML et CSS via Elephorm ou Florent présenté la formation.
Par contre, certains points sont difficile à comprendre mais aujourd'hui ça va un peu mieux. Le reste de mes réponses je les trouverai sur le net.

Je me suis servi de la fonction rechercher mais les réponses ne correspondaient pas vraiment à mon problème donc je me suis permis d'exposer mon problème ici.


Donc voici mon problème :

Dans l'image du dessus, il y a 2 icones, 1 avec l'écriture blanche(Nouvelle Discussion) et l'autre avec l'écriture jaune(Nouvelle Discussion) qui devra servir de hover. L'image est coupé en 2 mais cela n'a pas d'importance.

L'image du dessous représente mon bouton actuel "Nouvelle Discussion" de mon forum.

J'aimerai la remplacer par les images que je vous ai montrez la haut.

Voici l'adresse ou vous pouvez retrouvez le bouton mais pour cela vous devez être connecté, donc utilisez les logins suivant :
pseudo : test
password : 12345

(petite parenthèse, ce forum est inactif car c'est une version amélioré d'un autre site)

Alors voici le code sous le fichier viewforum.php :

// Can we or can we not post new topics?
if (($cur_forum['post_topics'] == '' && $pun_user['g_post_topics'] == '1') || $cur_forum['post_topics'] == '1' || $is_admmod)
	$post_link = "\t\t".'<p class="postlink conr"><a href="post.php?fid='.$id.'">[#red]'.$lang_forum['Post topic'].'[/#]</a></p>'."\n";
else
	$post_link = '';

Dans le code du dessus, ce qui est souligné en rouge correspond au bouton "Nouvelle discussion" du forum actuel.

J'aimerai remplacer ce bouton par la première image que je vous ai présenté en haut de ce message, donc dans l'attribut de la balise <a, je rajoute une class que j'appèlerai lol-news et j'efface par la même occasion ce qui se trouve entre les attributs <a>j'efface ça</a>

Donc je suis censé me retrouver avec le code suivant :

<a [#red]class="lol-news" [/#]href="post.php?fid='.$id.'"></a>

Dans le CSS j'insère le code suivant :

a.lol-news {background: url(../../img/Kontrast/bouttons/lol_news.png)}
a.lol-news:hover {background: url(../../img/Kontrast/bouttons/lol_news1.png)}

Ma première image je l'appel : lol_news.png
Ma deuxième image représentant le hover, je l'appel : lol_news1.png
Les deux se trouvant dans le dossier ../../img/Kontrast/bouttons/

Et donc une fois que mon code CSS inséré, rien ne s'affiche sur mon forum, constatez par vous même :


Je ne sais pas d'où cela vient et ça m'intrigue un peu. Ce que je veux concrètement c'est de remplacer l'ancien bouton du forum "Nouvelle Discussion" par les images que je vous ai présenté et mettre en hover l'image avec l'écriture dorée.

J'ai bien fait gaffe à à la syntaxe, à l'orthographe mais ça ne change rien.

Merci de votre aide
Modifié par Etranger (06 Jun 2010 - 01:07)

Bonjour,

Je n'ai absolument rien compris a ton explication (bon la migraine n'aide pas, mais quand même), mais il est important de te signaler que les images, porteuse de contenu, que tu place en fond d'élément DOIVENT se trouver dans le code HTML, appelées avec l'élément <img>. Le changement d'image devra donc se faire en JavaScript.

Donc en bref voila ce que je veux :

Remplacer l'icône d'origine "Nouvelle Discussion" de mon forum par une image ou il est écrit à l'intérieur "Nouvelle Discussion".
Une fois que l'image est remplacé, tout simplement avec la fonction hover, lorsque je glisserai ma souris vers l'image "Nouvelle Discussion (écriture blanche)", qu'ils puissent mettre mon autre image "Nouvelle Discussion (écriture dorée)".

Voilà, non le JavaScript n'est pas nécessaire car jusqu'à mnt ça marché très bien sans, donc je ne pense pas que le JavaScript (je ne sais même pas ce que c'est) m'apporterait la solution.
Modifié par Etranger (04 Jun 2010 - 10:50)

Bonjour,

1. Je n'ai vu aucun bouton "Nouvelle discussion" sur le forum, même en étant connecté avec les identifiants donnés.

2. Laurie-Anne a raison, la solution envisagée n'est pas bonne du point de vue de l'accessibilité. Tu veux faire un lien HTML sans intitulé, avec un code qui ressemble à <a href="..." class="mon-bouton"></a>. Tu supprimes donc le contenu du code HTML (là il est censé être placé...), et tu le mets dans une image de fond CSS (qui n'est censé servir qu'à la décoration). Pour peu que ton image ne se charge pas pour une raison technique quelconque, ou que l'utilisateur ne puisse pas la voir, le lien n'est pas utilisable.

3. Pour un bouton de ce type, j'aurais gardé le texte en HTML, et je me serais contenté de faire un cadre avec une image de fond. C'est parfaitement possible ici.

Je rêve ou c'est bien Florent V. qui me répond !! Non je plaisante

Florent V. a écrit :
Bonjour,

1. Je n'ai vu aucun bouton "Nouvelle discussion" sur le forum, même en étant connecté avec les identifiants donnés.

C'est normal car je n'ai pas remit les modifs pour que tu puisses voir par toi même. Donc le code actuellement est le suivant :

<a class="lol-news" href="post.php?fid='.$id.'"></a>

Florent V. a écrit :
2. Laurie-Anne a raison, la solution envisagée n'est pas bonne du point de vue de l'accessibilité. Tu veux faire un lien HTML sans intitulé, avec un code qui ressemble à <a href="..." class="mon-bouton"></a>. Tu supprimes donc le contenu du code HTML (là il est censé être placé...), et tu le mets dans une image de fond CSS (qui n'est censé servir qu'à la décoration). Pour peu que ton image ne se charge pas pour une raison technique quelconque, ou que l'utilisateur ne puisse pas la voir, le lien n'est pas utilisable.

Oui, mais le problème est lorsque je laisse le contenu, l'image ne remplace pas le texte d'origine, ce qui est censé le remplacer, non !!!

Florent V. a écrit :
3. Pour un bouton de ce type, j'aurais gardé le texte en HTML, et je me serais contenté de faire un cadre avec une image de fond. C'est parfaitement possible ici.

Oui je m'en doutais mais c'est vrai que ce n'est pas ce que je cherchais à faire.


Qqch me tracasse dans ce que tu me dis :

Florent V. a écrit :
2. Tu veux faire un lien HTML sans intitulé, avec un code qui ressemble à <a href="..." class="mon-bouton"></a>. Tu supprimes donc le contenu du code HTML (là il est censé être placé...), et tu le mets dans une image de fond CSS (qui n'est censé servir qu'à la décoration). Pour peu que ton image ne se charge pas pour une raison technique quelconque, ou que l'utilisateur ne puisse pas la voir, le lien n'est pas utilisable.

Si tu regarde ce site, on observe que c'est bien le CSS qui fait l'action et non le HTML :

<a style="margin-left: -150px;" title="Nouvelle discussion" class="btn-new-discussion" href="post.php?fid=6"></a>

et voici le CSS :

a.btn-new-discussion {
background:url("/img/bt/btn_new_discussion.png") no-repeat scroll center top transparent;

Et donc mon code est exactement comme celui du dessus sauf qu'à la différence, lui on voit son boutton "Nouvelle Discussion" et que moi on le voit pas.

C'est bon j'ai trouvé la solution par moi même.

Voici mon css :

DIV.inbox .postlink a {display: block; height: 23px; width: 150px;}
.lol-news {background: url(../../img/Kontrast/boutons/lol_news.png) no-repeat left top;}
.lol-news:hover {background: url(../../img/Kontrast/boutons/lol_news.png) no-repeat left bottom;}

et voici mon html :

<a href="post.php?fid=7" class="lol-news"></a>