Image qui disparaît pour laisser place à une description lors du survol de la souris.

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Arkady Ven 20 Aoû 2010 - 0:04

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 ? Sad

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 :

Image qui disparaît pour laisser place à une description lors du survol de la souris. Avantu

ImageShack.us

Image qui disparaît pour laisser place à une description lors du survol de la souris. Aprsg

- 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
avatar

Arkady
Nouveau membre

Messages : 5
Inscrit(e) le : 19/08/2010

http://rpgavatar.forumactif.org
Arkady a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Lixyr Ven 20 Aoû 2010 - 0:41

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.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Arkady Ven 20 Aoû 2010 - 1:07

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. Smile

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 ?
avatar

Arkady
Nouveau membre

Messages : 5
Inscrit(e) le : 19/08/2010

http://rpgavatar.forumactif.org
Arkady a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Lixyr Ven 20 Aoû 2010 - 1:22

Oui, tu peux mettre n'importe quoi à la place de l'image qui apparait : un lien, un texte. Tout ce qui est visible.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Arkady Ven 20 Aoû 2010 - 11:48

Bonjour,

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 ?
avatar

Arkady
Nouveau membre

Messages : 5
Inscrit(e) le : 19/08/2010

http://rpgavatar.forumactif.org
Arkady a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Lixyr Sam 21 Aoû 2010 - 0:11

Ben, oui, c'est possible. Tu rentres le code
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
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Arkady Sam 21 Aoû 2010 - 2:00

Raah excuse moi... Je suis trop têtu : O
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 : )
avatar

Arkady
Nouveau membre

Messages : 5
Inscrit(e) le : 19/08/2010

http://rpgavatar.forumactif.org
Arkady a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Lixyr Dim 22 Aoû 2010 - 1:24

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
Code:
<td></td>
qui se trouve dans le troisimèe code (donc le tableau) et tu modifie le deuxième code à ta convenance, évidemment.


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.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui disparaît pour laisser place à une description lors du survol de la souris.

Message par Arkady Dim 22 Aoû 2010 - 15:03

Merci beaucoup pour ton aide si précieuse Very Happy
Smile
avatar

Arkady
Nouveau membre

Messages : 5
Inscrit(e) le : 19/08/2010

http://rpgavatar.forumactif.org
Arkady a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum