Un hover un peu compliqué

[MissLoeva]

Bonjour !

Je suis en train de faire les codes d’un design ( Hop ) et j’aimerais savoir comment mettre une image en hover sur le New/noNew. ( Je veux mettre celui-ci sur lenoNew à droite) J’ai essayé plusieurs façons qui fonctionnent habituellement pour un hover simple, mais je commence à me douter qu’il faille recourir aux templates. J’ai cherché partout pour un tuto à propos d’un hover sur les new/nonew sans succes, mais je sais que c’est possible, alors j’aimerais savoir si quelqu’un connait un Tuto ou pourrait m’expliquer la marche à suivre.

Ps : ne regardez pas les couleurs de mon design, certain éléments sont encore en construction ♥


Merci, cordialement,

MissLoeva

[Roxy.]

Bonjour,

En effet vous allez devoir passer par les templates. Pour ce faire, allez dans le template index_box.
Cherchez ceci :

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Et remplacez par :

Code:

<a class="info" href="#"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><span><img src="http://i48.tinypic.com/2af9wjp.png"/></span></a>

Puis validez. Dans votre css, placez ceci :

Code:

/*Infobulle catégorie*/
a.info{
position:relative;
z-index:24;
text-decoration:none
}
 
a.info:hover{
z-index:25;
background-color:#FFF
}
 
a.info span{
display: none
}
 
a.info:hover span{
display:block;
position:absolute;
top:-100px;
left:-30px;
text-align: justify;
font-weight:none;
padding:1px;
}
/*FIN INFOBULLE*/

A vous de définir une valeur pour top et left dans a.info:hover span.

Cordialement,

[MissLoeva]

Bonjour,

Tout d’abord merci de ton attention ♥ Malheureusement ça n’a pas exactement marché, je crois que le problème vient du fait que mon Template est modifié ( C’est peu dire. En fait je l’ai totalement effacé et refait) .

Code:

<table><tr><td> <div class="boite1"> <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
 
  <div class="boite5"> <div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div><div class="stats">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>  </div><div class="boite3"> <div class="stats_cate">{catrow.forumrow.TOPICS} sujets || {catrow.forumrow.POSTS} messages</div> </div></div></td>  <td><div class="boite2"><div class="boite4"><div class="lastpost">{catrow.forumrow.LAST_POST} </div><span class="genmed"><img class="Icone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"</img></div> </div></td></tr></table>

Peu importe comment je le positionne, la main ne veux pas se positionner correctement, ensuite…Bha, mon LAST_POST qui est par-dessus mon New/noNew se retrouver cacher ( ce qui n’est pas pratique. ).

Y Aurait-il moyen de le positionner de sorte à ce que tout soit visible, ou bien le fait que mon LAST_POST soit par-dessus empêche la chose ?

Cordialement,

MissLoeva

[Roxy.]

Re,

Déjà il y a un problème dans votre code. La balise img est une balise simple or, vous en avez fait une double. Ce n'est pas comme en bbcode ! De plus, une span est ouverte mais ne se referme pas (juste avant l'img) est-ce qu'elle se ferme plus loin ?

Pour l'image, voilà le code à utiliser :

Code:

<img class="Icone" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/>

Normalement, si vous suivez mes informations ça devrait fonctionner.

Cordialement,

[MissLoeva]

Spoiler:

Eh bien ! J’ai un peu joué avec les codes et j’ai réussis à le faire comme il faut♥

Merci beaucoup pour l’aide !