Image qui disparaît pour laisser place à une description lors du survol de la souris.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Image qui disparaît pour laisser place à une description lors du survol de la souris.
Bonsoir tout le monde !
Voilà.. en apparence mon problème semble peut-être simple mais, mes nombreuses recherches ont été infructueuses.
Ce que j'essaye de faire c'est de faire disparaître l'image d'une catégorie lorsque l'on passe la souris dessus. De plus cette image devra laisser place à la description de la catégorie (comme dans les screenshot).
EDIT : Je met mon pointeur sur l'image et l'image devient transparente laissant apparaître la description. (je crois que c'est plus clair comme ça)
Quelqu'un peut-il m'aider ?
Merci d'avance
Le mieux c'est d'aller sur le forum.
- l'URL du forum est le suivant : http://tara-duncan.actifforum.com/forum.htm
- la version de votre forum : phpBB ? Je ne suis pas sûr... je dois avouer que tout ceci me dépasse un peu...
- une capture d'écran du problème :
ImageShack.us
- votre statut sur le forum : simple admin
- si vous avez modifié des templates : Je l'ignore
- si vous avez du CSS personnalisé : je l'ignore
- votre ou vos navigateur(s). : Mozilla et IE8
Voilà.. en apparence mon problème semble peut-être simple mais, mes nombreuses recherches ont été infructueuses.
Ce que j'essaye de faire c'est de faire disparaître l'image d'une catégorie lorsque l'on passe la souris dessus. De plus cette image devra laisser place à la description de la catégorie (comme dans les screenshot).
EDIT : Je met mon pointeur sur l'image et l'image devient transparente laissant apparaître la description. (je crois que c'est plus clair comme ça)
Quelqu'un peut-il m'aider ?
Merci d'avance
Le mieux c'est d'aller sur le forum.
- l'URL du forum est le suivant : http://tara-duncan.actifforum.com/forum.htm
- la version de votre forum : phpBB ? Je ne suis pas sûr... je dois avouer que tout ceci me dépasse un peu...
- une capture d'écran du problème :
ImageShack.us
- votre statut sur le forum : simple admin
- si vous avez modifié des templates : Je l'ignore
- si vous avez du CSS personnalisé : je l'ignore
- votre ou vos navigateur(s). : Mozilla et IE8
Dernière édition par Arkady le Dim 22 Aoû 2010 - 15:04, édité 6 fois
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Tu as tout ici : réponse
Il suffit juste de demander ce que tu pourrais ne pas comprendre dans cette réponse, mais c'est ultra simple. ^^ Bonne chance.
Il suffit juste de demander ce que tu pourrais ne pas comprendre dans cette réponse, mais c'est ultra simple. ^^ Bonne chance.
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Bonsoir,
Merci d'avoir répondu aussi vite : )
Je n'ai pas essayé le code, je ne pense pas qu'il s'agit exactement de ce que je recherche.
Es-tu allé sur le lien du forum ?
En réalité lorsque l'on survole l'image le texte apparaît comme par magie, comme si l'on avait fait disparaître l'image.
Dans le post que tu m'as donné, lorsque l'on survole l'image, une seconde image apparaît.
Peut-être pourrais-je remplacé l'image par un texte ?
Merci d'avoir répondu aussi vite : )
Je n'ai pas essayé le code, je ne pense pas qu'il s'agit exactement de ce que je recherche.
Es-tu allé sur le lien du forum ?
En réalité lorsque l'on survole l'image le texte apparaît comme par magie, comme si l'on avait fait disparaître l'image.
Dans le post que tu m'as donné, lorsque l'on survole l'image, une seconde image apparaît.
Peut-être pourrais-je remplacé l'image par un texte ?
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Oui, tu peux mettre n'importe quoi à la place de l'image qui apparait : un lien, un texte. Tout ce qui est visible.
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Bonjour,
J'ai utilisé ce code pour faire apparaître une image lors du survol.
Seulement la police "Verdana" n'est pas très nette. Est-ce possible de remplacer l'image lors du survol par un tableau dans lequel j'aurais écrit ce que je veux, ou carrément un texte. Faire apparaître un texte et un fond ?
J'ai utilisé ce code pour faire apparaître une image lors du survol.
- Code:
<a href="" onMouseOver= "if (document.images) document.banner1.src='http://img11.hostingpics.net/pics/655990archi2.jpg';" onMouseOut= "if (document.images) document.banner1.src='http://i64.servimg.com/u/f64/12/94/83/31/archiv10.jpg';"><img src="http://i64.servimg.com/u/f64/12/94/83/31/archiv10.jpg" name=banner1 border=0></a>
Seulement la police "Verdana" n'est pas très nette. Est-ce possible de remplacer l'image lors du survol par un tableau dans lequel j'aurais écrit ce que je veux, ou carrément un texte. Faire apparaître un texte et un fond ?
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Ben, oui, c'est possible. Tu rentres le code
(tr ce sont les lignes des tableaux, et td les colonnes, après tu peux mettre plusieurs colonne dans une seule ligne, soit plusieurs <td> dans un seul <tr> (oublie pas de refermer tes colonne par des </td>
et mettre plusieurs lignes dans ton tableaux, etc etc.
(en plus clair ça donne ça :
et entre chaque <td> </td> tu mets le contenu :
Ca te fait un tableau. Mais après faut savoir configurer les tableaux, on ne sait jamais ce que ça peut rendre au final.
Bon ça c'est pour le tableau, mais bon moi perso je te conseil le code qui est donné dans le lien que je t'ai envoyé, il marche très bien. : x
- Code:
<table><tr><td></td></tr></table>
(tr ce sont les lignes des tableaux, et td les colonnes, après tu peux mettre plusieurs colonne dans une seule ligne, soit plusieurs <td> dans un seul <tr> (oublie pas de refermer tes colonne par des </td>
et mettre plusieurs lignes dans ton tableaux, etc etc.
(en plus clair ça donne ça :
- Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
et entre chaque <td> </td> tu mets le contenu :
- Code:
<td>TON CONTENU</td>
Ca te fait un tableau. Mais après faut savoir configurer les tableaux, on ne sait jamais ce que ça peut rendre au final.
Bon ça c'est pour le tableau, mais bon moi perso je te conseil le code qui est donné dans le lien que je t'ai envoyé, il marche très bien. : x
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Raah excuse moi... Je suis trop têtu : O
Bon voici les trois codes.
Nous avons ce site
http://happy-end.forums-actifs.com/index.htm
Bien pour arriver à ces info bulles ou dois-je mettre ces codes ? (on ne prend pas en compte l'apparence)
Le premier dans la feuille CSS ?
Le second code à l'endroit ou je veux mettre la bulle ?
Et le troisième code dans tout ça à quoi sert-il ?
Merci d'avance : )
Bon voici les trois codes.
- Code:
.lock {
position: relative;
cursor: pointer;
}
.lock .lock-hidden {
/* positionnement du bloc qui apparait */
display: none;
position: absolute;
top: 10px;
left: 5px;
/* style du bloc qui apparait */
border: 2px solid blue;
- Code:
<div class="lock">
<img src="http://2img.net/i/fa/fdf/jeux1010.png" />
<div class="lock-hidden">
KOHANE NATSUKI
<img src="http://2img.net/i/fa/fdf3/nouvea19.png" />
FONDATRICE | GRAPHISTE
</div>
</div>
- Code:
<table>
<tr>
<td>
code image 1
</td>
<td>
code image 2
</td>
</tr>
</table>
Nous avons ce site
http://happy-end.forums-actifs.com/index.htm
Bien pour arriver à ces info bulles ou dois-je mettre ces codes ? (on ne prend pas en compte l'apparence)
Le premier dans la feuille CSS ?
Le second code à l'endroit ou je veux mettre la bulle ?
Et le troisième code dans tout ça à quoi sert-il ?
Merci d'avance : )
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Oui tu as tout compris.
Le troisième code te sert à insérer le deuxième code. C'est un tableau. Tu es obligé de mettre ton code dedans sinon tu verras qu'il ne marchera pas bien, ça va très mal s'afficher. C'est une mise en place, je pense.
Tu places le deuxième code entre deux
Pour le deuxième code, ce qui se trouve après " <div class="lock"> , c'est ton image, ce que l'on voit Avant le passage de la souris.
Ce qui est après " <div class="lock-hidden"> c'est ce que l'on voit quand la souris est sur l"image, donc ton texte.
Donc en fait, à l'endroit où tu mets le code, tu as
Voilà. Et tu fais ça à chaque fois.
Ensuite, je te conseil de bien modifier les valeurs dans le code que tu vas mettre dans ta feuille CSS, soit le premier.
Cette partie là.
Il indique l'endroit où va apparaitre ton texte par rapport à l'image que tu mets au début. C'est à toi de modifier jusqu'à ce que ton texte tombe pile où tu veux.
Plus le top sera élévé, et plus ton texte sera bas. Plus ton left sera élevé et plus ton texte sera à droite. *
Pour d'autres questions, tu peux demander.
Le troisième code te sert à insérer le deuxième code. C'est un tableau. Tu es obligé de mettre ton code dedans sinon tu verras qu'il ne marchera pas bien, ça va très mal s'afficher. C'est une mise en place, je pense.
Tu places le deuxième code entre deux
- Code:
<td></td>
Pour le deuxième code, ce qui se trouve après " <div class="lock"> , c'est ton image, ce que l'on voit Avant le passage de la souris.
Ce qui est après " <div class="lock-hidden"> c'est ce que l'on voit quand la souris est sur l"image, donc ton texte.
Donc en fait, à l'endroit où tu mets le code, tu as
- Code:
<table>
<tr>
<td>
<div class="lock">
TON IMAGE
<div class="lock-hidden">
TON TEXTE AU PASSAGE DE LA SOURIS
</div>
</div>
</td>
</tr>
</table>
Voilà. Et tu fais ça à chaque fois.
Ensuite, je te conseil de bien modifier les valeurs dans le code que tu vas mettre dans ta feuille CSS, soit le premier.
- Code:
top: 10px;
left: 5px;
Cette partie là.
Il indique l'endroit où va apparaitre ton texte par rapport à l'image que tu mets au début. C'est à toi de modifier jusqu'à ce que ton texte tombe pile où tu veux.
Plus le top sera élévé, et plus ton texte sera bas. Plus ton left sera élevé et plus ton texte sera à droite. *
Pour d'autres questions, tu peux demander.
Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.
Merci beaucoup pour ton aide si précieuse
Sujets similaires
» Image Reactive au survol de la souris
» Effet sur image lors du survol de la souris
» Changement de couleur lors du survol de la souris
» Voir la description d'un groupe au survol de la souris.
» Modification d'une image au survol de la souris
» Effet sur image lors du survol de la souris
» Changement de couleur lors du survol de la souris
» Voir la description d'un groupe au survol de la souris.
» Modification d'une image au survol de la souris
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum