JS : Changer curseur sur1 zone cliquable
Résolu
Cécilia
-
Geff33 -
Geff33 -
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)">
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)">
A voir également:
- Please enable js and disable any ad blocker firefox
- Disable uac - Guide
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Spybot search and destroy - Télécharger - Antivirus & Antimalwares
- Any video converter - Télécharger - Conversion & Codecs
8 réponses
Ca fonctionne aussi sur Safari (5.0.3) et pour éviter de mettre un onmouseout pour remettre un cursor par défaut, il suffit de préciser que le changement de curseur ne s'applique qu'à l'objet en question (une image par exemple) en utilisant la syntaxe "this" au lieu de "document.body". Exemple
onmouseover="this.style.cursor='pointer';"
onmouseover="this.style.cursor='pointer';"
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';\"
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';\"
Salut Cécilia
sous IE5 cela fonctionne :
mais sur un nav plus recent vaut mieux 'pointer'
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'
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu as oublier de refermer le onmouseout :)
onmouseover=\"document.body.style.cursor='hand';\"
onmouseout=\"document.body.style.cursor='default';\
onmouseover=\"document.body.style.cursor='hand';\"
onmouseout=\"document.body.style.cursor='default';\
Ni dans la feuille de style (pourtant bien reconnue, ni inline :
<area style="cursor:pointer;" shape="rect" coords="... etc.
:-(
Michel