Bonjour à vous tous,
Je rencontre un petit soucis de hover pour une image qui doit changer d'apparence au moment ou l'infobulle apparait.

Mon css

Code:


/ infobulle news dans les forums-------------------------------------------/
.news {
background-image:url("http://i63.servimg.com/u/f63/11/93/85/24/alga10.png");
background-repeat:no-repeat;
height:32px;
width:67px;
}
.news:hover {
background-image:url("http://i63.servimg.com/u/f63/11/93/85/24/alga_210.png");
background-repeat:no-repeat;
height:32px;
width:67px;
}

.news-content {
background-color:transparent;
color:#D6FC91;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
margin-top:-40px;
padding:8px;
}
.news .news-content {
display:none;
text-align:left;
}
.news:hover .news-content {
-moz-border-radius:12px 12px 12px 12px;
-moz-box-shadow:0 0 6px #D6FC91;
background-color:black;
background-repeat:repeat;
border:1px solid #1C1C1C;
display:block;
height:auto;
margin-left:75px;
max-width:600px;
position:absolute;
width:auto;
}
.news {
background-position:center top;
background-repeat:no-repeat;
text-align:center;
z-index:30;
}
.contenu-news {
color:#a6a8a3;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-shadow:1px 1px 1px #000000;
}
.bouton-news {
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 4px #000000;
border:1px solid #1C1C1C;
color:#DFF2FF;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
height:10px;
padding-left:9px;
padding-right:9px;
text-align:center;
text-shadow:1px 1px 1px #000000;
}
.bouton-news:hover {
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 4px #FEBD70;
border:1px solid #1C1C1C;
color:green;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
height:10px;
padding-left:9px;
padding-right:9px;
text-align:center;
text-shadow:1px 1px 1px #000000;
}
/ Fin infobulle news dans les forums---------------------------------------------------------------/

et le html contenu dans les descriptions des forums

Code:

<div class="news"><img src="http://i63.servimg.com/u/f63/11/93/85/24/alga10.png" width="67" height="32" ><div valign="top" class="news-content"><span class="genmed"><table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>    <td align="left" class="contenu-news">Blablablablabal</td>  </tr>  <tr>    <td align="center"><br>    <span><a href="url du lien" class="bouton-news">Nom du lien</a></span>     <span><a href="url du lien" class="bouton-news">nom du lien</a></span</td>  </tr></table><br></span> </div></div>


Comme vous le voyez, pour compenser le dysfonctionnement du hover, j'ai été obligé de rajouter dans le html une image fixe .

Code:

<img src="http://i63.servimg.com/u/f63/11/93/85/24/alga10.png" width="67" height="32" >

Si par le plus pure des hasards, vous voyez ce qui cloche

Merci par avance pour votre aide

Hello Demeter,

Je suis navrée, mais se figurer le souci avec juste les codes, c'est assez difficile.
Si tu pouvais donner un lien, une capture d'écran, bref, quelque chose de visuel pour nous aider à t'aider, ce serait tipeu top.

Mille excuses Final blond,
Voici le lien du forum test ou j'ai installé cette petite modification.

http://altitudetest.forumactif.com/index.htm

Comme vous pouvez le voir au niveau du premier forum intitulé "réglement", l'image notée info n'apparait que par le fait qu'elle est installée dans le script.

Si je la supprime du script, le css ne fait apparaître l'image qu'en mode hover.

En fait, on dirait que cette partie du css n'est pas prise ne compte

Code:

.news {
background-image:url("http://i63.servimg.com/u/f63/11/93/85/24/alga10.png");
background-repeat:no-repeat;
height:32px;
width:67px;
}

Pour illustrer un peu plus simplement le phénomène, j'ai installé le script dans le forum intitulé "partenariat" en y supprimant l'url de l'image. . Essayez de passer le curseur de votre souris sur la partie gauche de ce forum et vous ne verrez apparaitre l'image qu'au moment du passage du curseur. Normalement, la class devrait installer la première image sans l'infobulle puis en mode hover la seconde image avec infobulle.



Petite question subsidiaire : connaitriez vous un moyen de ralentir la disparition de l'infobulle ?
Je compte installer ce système pour y placer les liens de mes sous forums mais, vu la vitesse de disparition de l'infobulle, il faut faire preuve d'une grande dextérité afin de pouvoir placer le curseur dessus.

Merci par avance pour cette aide.

A part un problème de position du contenu hover (un peu trop éloigné de l'image), je ne vois pas où est le blème, le principe de l'infobulle étant de s'ouvrir avec par le hover ?

POur l'infobulle c'est normal mais, la premiére image doit être présente pour être remplacée par l'image contenue dans le hohver. dans le forum partenariat le hover fonctionne mais l'image de base n'est pas présente.

Sorry pour le retard Demeter, je suis débordée par des contrôles à tout va en cours !

Mais je la vois cette image moi :

Je ne cerne pas le problème... Pourais-tu faire un screen ?

Bonjour Final blond,
L'image que tu vois dans le forum intitulé règlement correspond à l'insertion que j'ai fait dans le script

Code:

<div class="news"><img src="http://i63.servimg.com/u/f63/11/93/85/24/alga10.png" width="67" height="32" ><div valign="top" class="news-content"><span class="genmed"><table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>    <td align="left" class="contenu-news">Blablablablabal</td>  </tr>  <tr>    <td align="center"><br>    <span><a href="url du lien" class="bouton-news">Nom du lien</a></span>    <span><a href="url du lien" class="bouton-news">nom du lien</a></span</td>  </tr></table><br></span> </div></div>

Sans cette insertion , j'obtiens le résultat que tu ne peux apercevoir sur le forum intitulé partenariat cad dire que la seconde image apparait lorsque tu passes le curseur du côté gauche mais l'image de base sans infobulle n'apparaît pas.

Le principe du hover serait d'avoir en base fixe -l'image info que tu m'a posté au dessus) et, au moment de passer le curseur sur l'image , une autre image apparait avec l'infobulle.

Sur le forum partenariat

Comme tu le vois, la premiére image régie par le css ci dessous ne s'affiche pas .

Code:

/ infobulle news dans les forums-------------------------------------------/
.news {
background-image:url("http://i63.servimg.com/u/f63/11/93/85/24/alga10.png");
background-repeat:no-repeat;
height:32px;
width:67px;
}

Maintenant, je passe mon curseur sur la partie gauche et :


Le css pour l'apparition de la deuxième image et bien pris en compte.
Le css correspondant

Code:

.news:hover {
background-image:url("http://i63.servimg.com/u/f63/11/93/85/24/alga_210.png");
background-repeat:no-repeat;
height:32px;
width:67px;
}


Wouah, c'est zarbi ça !
J'ai mis exactement le code HTML (il n'y a pas de script) dans une description de forum, et le même CSS, mais j'ai bien l'image voulue en place avant le hover.
Mieux, je la vois aussi sur ton forum :
Avant le hover :
Avec le hover :

Excuse-moi si c'est moi qui comprends de travers, je suis quelque peu lente...

Finnal blond,
tu n'as pas à t'excuser; c'est déjà bien sympa de me venir en aide.

Zarbi éffectivement. Je me demande si ce n'est pas un soucis d'interprétation du navigateur.
Je navigue sous Firefox et apparemment, tu es sous IE8 .

Si c'est le cas, je suis pas sorti de l'auberge; il y a de quoi s'arracher les cheveux avec les incompatibilités entre les divers navigateurs.

Nope, moi je suis avec Opera, mais je n'avais pas vérifié sous Mozilla, et là en effet ça n'affiche pas l'image, sous Google c'est une image tronquée et sous IE8 c'est tout bon aussi...
Mais là où ça devient intéressant, c'est que ce que j'ai installé sur mon FT (donc exactement la même chose), c'est que tout est ok aussi sous Mozilla et Google, preuve en est par Mozilla :
Avant hover :
Par le hover :

Ce que je pense c'est qu'il y a beaucoup de scripts, d'images lourdes, etc sur ton forum.
Peut-être que l'un d'eux fait que ce code bugue...
D'une manière générale, ton forum est très lourd et difficile à charger...

Coucou, j'étais passé un soir et pensai pouvoir trouver l'erreur ! sauf que je suis passé à autre chose et que je l'avais complètement oublié ! (c'est tout moi ! tête en l'air) je suis retombé dessus et donc voila j'ai trouvé la raison de ce bug.

Tu mets l'images dans ton html et donc le css !

Une seule fois est suffisant, supprime la de ta description et tout ira bien.

Code:

<div class="news"><div valign="top" class="news-content"><span class="genmed"><table width="100%" cellspacing="0" cellpadding="0" border="0">  <tr>    <td align="left" class="contenu-news">Blablablablabal</td>  </tr>  <tr>    <td align="center"><br>    <span><a href="url du lien" class="bouton-news">Nom du lien</a></span>    <span><a href="url du lien" class="bouton-news">nom du lien</a></span</td>  </tr></table><br></span> </div></div>

Petite remarque... pour le hover, tu n'as pas besoin de remettre tous les paramètres mais seulement ceux que tu modifies au survol.

Exemple :

.bouton-news {
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 0 4px #000000;
border:1px solid #1C1C1C;
color:#DFF2FF;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
height:10px;
padding-left:9px;
padding-right:9px;
text-align:center;
text-shadow:1px 1px 1px #000000;
}

.bouton-news:hover {
-moz-box-shadow:0 0 4px #FEBD70;
color:green;
}

Tu me modifies que la couleur de l'ombre et du texte, donc au hover pas besoin d'en mettre plus.

Bonne journée.

Bonjour à vous,

Où en est le sujet Demeter ?
Quierra a-t-elle pu t'aider ?