image qui s'affiche au dessus avec souris au passage sur un lien

Version imprimable

14/09/2006, 13h35
pierrot10

image qui s'affiche au dessus avec souris au passage sur un lien

Bonjour,
je cherche une solution simple qui fait ceci

Quand je passe ,a souris sur un lien, j'aimerai que l'icone d'un cadena s'affiche au dessu/en plus de la main standard.

Il faudrait que ca marche avec IE, Netscape, Safari et Firefox.

J'ai pensé récupérer la position du curseur puis dé-cacher l'image, mais suis pas expert en javascript et j'aurais voulu votre aide,

merci!
14/09/2006, 13h58
Bisûnûrs

Une solution consiste à modifier l'image du curseur, si c'est ce que tu souhaites, mais évidemment, seulement compatible avec IE ...
14/09/2006, 14h36
stanford

La propriété de feuille de style css cursor accepte pour Internet Explorer 6+ et Firefox un curseur personnalisé au format ".cur" ou ".csr".
donc ton lien ressemblerais a :

Code:

<a href="#" style="cursor:url(moncueseur.cur) "

mais désolé safari et netscape non...

tu pourrais aussi rajouter une image de cadena dans un div qui se positione juste a coté de ton lien quand tu passe au dessus du lien, c'est peut etre la solution la plus simple plutôt que de modifier le curseur.
14/09/2006, 17h43
Auteur

bonjour,

Tu as posté le même sujet dans le forum HTML :roll: :
http://www.developpez.net/forums/sho...d.php?t=210219
et il y a des réponses.
15/09/2006, 09h38
stanford

ha ben comme quoi chuis pas une grande star en css, mais ma solution était bonne et crossbrowser en plus :D
15/09/2006, 09h45
Bisûnûrs

Citation:

Envoyé par stanford

ha ben comme quoi chuis pas une grande star en css, mais ma solution était bonne et crossbrowser en plus :D

Sauf que les curseurs personnalisés ne fonctionnent qu'avec IE. ^^
Après tu peux évidemment prendre les curseurs standards mais ce n'est pas ce qu'il veut.
18/09/2006, 16h51
pierrot10

Merci Stanfor,
mais aucune des deux solution fonctionne avec IE et firefox.

Code:

a.resources_links:hover{ color: #cc6600;text-decoration:underline; cursor:url(img/icone/secure.csr);}

Cependent la deuxiemen solution me parait bien d'essayé. Mais comment puis, je possitionner un div en focnton de la souris?
18/09/2006, 17h01
Bisûnûrs

http://javascript.developpez.com/faq...nt#SourisCoord

Après à toi d'adpater le code ..

j'ai retrouvé dans mes archives cet excellent code.

Par contre je ne sais plus de qui est ce code, si l'auteur se reconnait qu'il se manifeste ;)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<html>
<head>
<title></title>
<style>
<!--
/* INFOS BULLES */
a.info_image {
  text-decoration: none;
  position: relative;
  /*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: block;
  position: absolute;
  top: 10px;
  left: 40px;
  border: none;
}
img{
border: none;
}
//-->
</style>
</head>
 
<body>
bla bla bla bla bla bla bla bla bla bla bla bla
 
<b><a href="#" class="info_image">ton lien
<span><img src="ImagePopUp.gif" alt="" /></span>
</a></b>
 
bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla
 
 
</body>
 
</html>