Rechercher : dans
Par :

JS : Changer curseur sur1 zone cliquable

Dernière réponse le 2 nov 2009 à 11:08:51 Cécilia, le 3 jun 2005 à 14:44:23 
 Signaler ce message aux modérateurs

Bonjour à tous et merci pour votre lecture ;o)

J'ai crée une page web, extension php, qui contient une image sur laquelle il y a des zones cliquables (<MAP> <area>).

Dans ces zones cliquables, j'ai utilisé l'attribut 'onMouseOver' : il appelle une fonction pour faire apparaître des info-bulles personnalisées.

De plus, pour ma page, j'ai un curseur en forme de seringue (c'est un site pour une école d'infirmière) ;o)

Mon problème est que lorsque je passe sur les zones cliquables en question, je voudrais que mon curseur change et devienne une petite main (HAND_cursor ou cursor:hand ou encore cursor:pointer).
Cela ne marche pas, j'ai donc voulu créer une fonction qui le fait, et que j'appelerai lorsque la souris passe sur la zone (onMouseOver), mais ça ne marche toujours pas, et en plus mon info-bulle n'apparaît plus.

J'ai l'impression que dans mon attribut onMouseOver je ne peux pas appeler 2 fonctions. J'ai donc essayé de mettre tout le code dans la même fonction mais ça ne marche pas non plus.

J'ai aussi essayé de mettre 2 fois l'attribut onMouseOver mais ça ne marche toujours pas.......

Voilà ma ligne et mon code concerné (attention je suis pas une pro !! ;o) :

<SCRIPT LANGUAGE="JavaScript">
function ChangerCurseur()
{
Cursor curseur = new Cursor(hand_CURSOR);
setCursor(curseur);
}
</SCRIPT>


function RendElemVisible(Id)
{
var Elem = document.all[Id].style;
Elem.left = event.clientX + 30;
Elem.top = event.clientY + 5;
Elem.visibility = "visible";
}


<area shape="rect" coords="51,43,191,59" href="presentation.php" name="info1" onMouseOver="ChangerCurseur(), RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">

Configuration: Windows 2000 pro  / I.E 6.0

Meilleures réponses pour « JS : Changer curseur sur1 zone cliquable » dans :
Changer l'aspect du curseur en CSS VoirLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - L'objet window VoirLes particularités de l'objet window L'objet window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la page web, il contient donc : l'objet document: la page en elle-même l'objet location: le lieu de...

1

Timon1102, le 3 jun 2005 à 15:14:12
  • +1

Salut Cécilia
sous IE5 cela fonctionne :

onmouseover=\"document.body.style.cursor='hand';\" 
onmouseout=\"document.body.style.cursor='default';


mais sur un nav plus recent vaut mieux 'pointer'

Répondre à Timon1102

2

rafphifou, le 22 sep 2007 à 12:22:54

Tu as oublier de refermer le onmouseout :)

onmouseover=\"document.body.style.cursor='hand';\"
onmouseout=\"document.body.style.cursor='default';\

Répondre à rafphifou

3

anonymous, le 22 oct 2007 à 13:18:53

à la place de default, auto

Répondre à anonymous

4

Mck, le 21 fév 2008 à 23:17:39

Onmouseover=\"document.body.style.cursor='hand';\"

Cette ligne est fausse et spécifique à IE.
Pour respecter le W3C, le type de cursor correspondant est 'pointer'.
onmouseover=\"document.body.style.cursor='hand';\" onmouseout=\"document.body.style.cursor='auto';\"

Répondre à Mck

5

Enax, le 21 fév 2008 à 23:41:45
  • +5

Sinon, il y a le CSS pour les visiteurs qui ont désactivé le JS :

area:hover {cursor: pointer;}

Répondre à Enax

6

 thankol, le 2 nov 2009 à 11:08:51

Bonjour,

excellent ce code javascript !!

mais sous safari ca ne fonctionne pas ???? mais bien content de retrouver ma main sous IE 8

Merci beaucoup

Fabien

Répondre à thankol
Collection CommentÇaMarche.net