Apparition d'image et de texte au passage de la souris

[Hansel]

Bonjour (ou plutôt Bonsoir),

Je voulais savoir comment faire pour faire comme sur ce forum {Darkdream of Angels} et bien d'autres. C'est à dire faire apparaître cette petite fenêtre quand on passe la souris sur une des images de la Staff.

Ainsi :

Spoiler:

Merci d'avance pour la réponse.

Mon forum {Happy End} [version pbhh2]

[Xuĕ]

chalut



il faudrait ajouter dans le css qui est dans l'onglet feuille de style css de la page couleurs qui est dans l'onglet affichage du panneau d'amin ceci

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;
   border-radius: 5px;
   background-color: red;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   text-align: center;
}
.lock:hover .lock-hidden {
   display: block;
}

puis pour une image il faudra mettre

Code:

<div class="lock">
   <img src="http://2img.net/i/fa/fdf/jeux1010.png" />
   <div class="lock-hidden">
      KOHANE NATSUKI<br />
      <img src="http://2img.net/i/fa/fdf3/nouvea19.png" /><br />
      FONDATRICE | GRAPHISTE
   </div>
</div>

ensuite faut mettre cela dans un tableau avec une image par case, voilà l'exemple pour deux images

Code:

<table>
   <tr>
      <td>
         code image 1
      </td>
      <td>
         code image 2
      </td>
   </tr>
</table>

[Hansel]

Waaaaaaaah ! (et bonjour ^^")

Merci beaucoup d'avoir répondu aussi vite ! ♥

Je vais essayer ça tout de suite et je vous en dirais des nouvelles !

Encore merci ><

EDIT : bien, j'ai réussi à faire afficher le cadre mais je n'arrive pas à le mettre sur l'image, comment puis-je faire ? (en fait, le cadre s'affiche en haut à gauche de ma page web quand je passe la souris sur l'image)
Encore merci d'avance !

[Hansel]

J'ai enfin trouvé la solution à mon problème.

Merci beaucoup pour les codes !

[Jasper Cullen]

Bonjour je suis interressé par ce code car je le cherche depuis des jours mais voilà, je ne sais ce qu'il faut mettre dans /* positionnement du bloc qui apparait */ et /* style du bloc qui apparait */. Pourriez vous m'expliquer ce à quoi ça correspond?
Merci beaucoup.

[kevnord]

bonjour,

relatif a cette question,

est-ce qu'il possible de faire en sorte, de la même manière, qu'un son se joue lorsque l'on clic sur un bouton ?

[Hansel]

Jasper Cullen :

Pour "/* positionnement du bloc qui apparait */ " il s'agit de droite, gauche ou centre (en anglais).
Pour "/* style du bloc qui apparait */" il s'agit de l'écriture (New Roman, Georgia...).

J'espère t'avoir un peu aidé uu

Pour Kevnord, désolée mais je ne sais pas...

[Jasper Cullen]

Merci beaucoup Hansel ^^