infobulle personnalisee donnant une image...

**feed_our_vision** · 09/01/2006, 05h19

pour voir ce dont je parle cliquer sur le lien suivant
http://absolutecross.com/tutorials/p...inset-buttons/
c'est une page qui parle d'un tutorial photoshop, a chaque fois que vous survoler le lien d'un outil de photoshop, l'infobulle est l'apercu de l'outil tel qu'il est dans la barre d'outils...
l'infobulle n'affiche donc pas du texte mais une image...
Merci

**Auteur** · 09/01/2006, 10h57

bonjour,

c'est simplement un script javascript qui permet d'afficher ce genre d'info-bulle.
Le script doit créer un div contenant une image. Ce div est affiché au moment où la souris passe sur le lien.

**glloq8** · 09/01/2006, 11h54

Tu crées un lien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="info_image">ton lien</a>

et dans ce lien, tu mets un span qui contient l'image que tu veux afficher dans ton infobulle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" class="info_image">ton lien<span><img src="ton_image.gif" alt="" /></span></a>

ensuite, tu crée les styles qui font fonctionner tout ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
/* INFOS BULLES */
a.info_image {
  position: relative;
  text-decoration: none;
  z-index: 0;
}
a.info_image span {
  display: none;
}
a.info_image:hover {
  text-decoration: none;
  background: none; /* HACK IE */
  z-index: 1;
}
 
a.info_image:hover span {
  display: inline;
  position: absolute;
  top: -7px;
  left:-10px;
  border: 1px solid #FF8600;
}

Sans javascript !

Par contre, si tu veux que ton infobulle suive to curseur, là, il faudra du javascript !

**Auteur** · 09/01/2006, 15h10

pas mal du tout !!

Je peux conserver ce code dans un petit coin de mon disque dur et peut-être le réutiliser ?

Sur le site nommé par feed_our_vision, ils utilisent un script (cf. le lien "Ellipse Tool" du second paragraphe).

**feed_our_vision** · 10/01/2006, 03h44

cool et merci beaucoup....

**glloq8** · 10/01/2006, 10h10

Envoyé par Auteur

pas mal du tout !!

Je peux conserver ce code dans un petit coin de mon disque dur et peut-être le réutiliser ?

Sur le site nommé par feed_our_vision, ils utilisent un script (cf. le lien "Ellipse Tool" du second paragraphe).

Bien sûr que tu peux... à partir du moment où je le mets sur le forum, il est utilisable par tout le monde... surtout qu'il n'est pas de moi, mais que je l'ai chopé dans un bouquin !