Articles web

Nos articles concernant les techniques web sont centrés sur des solutions pratiques qui mettent en œuvre, le plus souvent, notre framework web : Vae Soli!

Des articles généraux sont également fournis dans le respect des standards du web.

Tous nos articles web sont disponibles sous le couvert de la licence Icône Creative Commons Creative Commons — Paternité - pas de modification.

2011-11-11 à 09:51:49

Changer le curseur par CSS et en Javascript

javascript,css,cursor

2011-11-11 – 09:50

2011-11-11 – 10:00

2011-11-11 – 09:51

La question à laquelle nous tenterons de répondre dans ce petit article est de savoir comment nous pouvons positionner le curseur à appliquer sur une zone donnée. Nous y répondrons de deux points de vue :

  1. CSS
  2. Javascript

CSS

Tous les navigateurs modernes proposent les styles suivants (en déplaçant la souris sur les styles en question, vous verrez immédiatement à quoi le curseur ressemble et une infobulle vous montre directement la propriété CSS positionnée):

automoveno-dropcol-resize
all-scrollpointernot-allowedrow-resize
crosshairprogresse-resizene-resize
defaulttextn-resizenw-resize
helpvertical-texts-resizese-resize
inheritwaitw-resizesw-resize

Javascript

Pour modifier la propriété "curseur" d'un objet en Javascript, il faut passer par le style de l'objet. Voyez par exemple comment affubler le curseur "progress" : 

szCursor = "progress";
object.style.cursor = szCursor;

Example

Si vous cliquez sur un élément de la table des types de curseur présentée plus haut, le type de curseur choisi sera immédiatement affecté à la présente division (dont l'ID est cursor-example) et le code Javascript vous sera présenté ci-dessous :