Boite noir qui sui la souris sur une image

Boite noir qui sui la souris sur une image - HTML/CSS - Programmation

Marsh Posté le 26-12-2009 à 22:09:56    

Bonjour j aimerais faire une sorte de boite noir qui suis la souris quand on passe la souris sur une image.
 
Exemple sur TF2 : http://img707.imageshack.us/img707/7310/boitenoir.png (La boite suis la souris quand on reste sur limage.)
Si quelqu'un pourrais aider
Voila.


Message édité par lugcat le 26-12-2009 à 22:13:11
Reply

Marsh Posté le 26-12-2009 à 22:09:56   

Reply

Marsh Posté le 27-12-2009 à 00:11:37    

Cela se nomme en anglais un "tooltip"
Voilà un exemple avec jquery + un plugin léger qui contient d'autres éléments d'interface
http://flowplayer.org/tools/tooltip.html

Reply

Marsh Posté le 27-12-2009 à 00:36:29    

Oui mais je cherche un qui suit la souris.


Message édité par lugcat le 27-12-2009 à 02:45:44
Reply

Marsh Posté le 27-12-2009 à 12:09:25    

Je te propose :  
1. changer le curseur de manière à ce qu'il se "transforme" en une image que tu prévois à l'avance. ici j'ai trouvé tout plein de ressources pour changer le curseur.
 
2. Tu fais en sorte que celui-ci ne change de forme que lorsque tu passe au dessus de l'image. Pour celà, utilise :hover, en css.
 
À ce moment là, tu auras un curseur qui change de forme à chaque fois que tu passe sur l'image que tu auras désignée. Reste à donner l'illusion que tu fais apparaitre une boite derrière le curseur
 
3. L'image que tu utilises pour remplacer le curseur peut être constituée d'une image de curseur + d'une boite noire.
 
 
Bon, tout çà, je le fais de tête, il se peut que çà ne marche pas (j'ai notamment un doute sur la taille de l'image que tu peux utiliser pour remplacer le curseur.


---------------
Question sur la programmation ? DevWeb it!
Reply

Marsh Posté le 28-12-2009 à 13:17:19    

lugcat a écrit :

Oui mais je cherche un qui suit la souris.


http://craigsworks.com/projects/simpletip/ le fait par exemple.


Message édité par pataluc le 28-12-2009 à 13:17:37
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed