Modifier l'affichage du curseur

lomaster · le 8 septembre 2010

Bonjour,

Voila j'ai un une phrase qui se présente sous forme de lien mais qui est en faite un onMouseOver / onMouseOut avec une bulle texte qui apparait.

Je souhaiterai que lorsque la souris passe sur la phrase, le curseur ne se transforme pas en main mais reste en flèche.

Comment puis-je mis prendre

Est-ce sur le javascripts ou puis-je le faire avec une class sur le html.

Merci par avant.

Cordialement

Dylav · le 8 septembre 2010

Fais un copier/coller du code ci-dessous dans un fichier texte que tu nommeras par exemple cursors.html. Lance-le sous ton navigateur favori. Passe le curseur sur chaque ligne.

<html><head>
<title>Cursors</title>
</head><body>
<div onmouseover="this.style.cursor='auto'">Curseur auto</div>
<div onmouseover="this.style.cursor='nw-resize'">Curseur nw-resize</div>
<div onmouseover="this.style.cursor='crosshair'">Curseur crosshair</div>
<div onmouseover="this.style.cursor='n-resize'">Curseur n-resize</div>
<div onmouseover="this.style.cursor='default'" style="color:red">Curseur default</div>
<div onmouseover="this.style.cursor='se-resize'">Curseur se-resize</div>
<div onmouseover="this.style.cursor='pointer'">Curseur pointer</div>
<div onmouseover="this.style.cursor='sw-resize'">Curseur sw-resize</div>
<div onmouseover="this.style.cursor='move'">Curseur move</div>
<div onmouseover="this.style.cursor='s-resize'">Curseur s-resize</div>
<div onmouseover="this.style.cursor='e-resize'">Curseur e-resize</div>
<div onmouseover="this.style.cursor='w-resize'">Curseur w-resize</div>
<div onmouseover="this.style.cursor='ne-resize'">Curseur ne-resize</div>
<div onmouseover="this.style.cursor='text'">Curseur text</div>
<div onmouseover="this.style.cursor='help'">Curseur help</div>
<div onmouseover="this.style.cursor='wait'">Curseur wait</div>
<div onmouseover="this.style.cursor='inherit'">Curseur inherit</div>
</body></html>

Sources :

« Changer l'aspect du curseur en CSS »

« Exemple de code détaillé de la propriété css cursor »

KewlCat · le 23 septembre 2010

Pourquoi changer l'attribut de style dynamiquement en JavaScript (pour toujours le mettre à la même valeur, en plus) ? Autant lui donner un style dès le départ :

<html><head>                                                                                                                           
<title>Cursors</title>                                                                                                                 
</head><body>                                                                                                                          
<div style="cursor:auto">Curseur auto</div>
<div style="cursor:nw-resize">Curseur nw-resize</div>
<div style="cursor:crosshair">Curseur crosshair</div>
<div style="cursor:n-resize">Curseur n-resize</div>
<div style="cursor:default" style="color:red">Curseur default</div>
<div style="cursor:se-resize">Curseur se-resize</div>
<div style="cursor:pointer">Curseur pointer</div>
<div style="cursor:sw-resize">Curseur sw-resize</div>
<div style="cursor:move">Curseur move</div>
<div style="cursor:s-resize">Curseur s-resize</div>
<div style="cursor:e-resize">Curseur e-resize</div>
<div style="cursor:w-resize">Curseur w-resize</div>
<div style="cursor:ne-resize">Curseur ne-resize</div>
<div style="cursor:text">Curseur text</div>
<div style="cursor:help">Curseur help</div>
<div style="cursor:wait">Curseur wait</div>
<div style="cursor:inherit">Curseur inherit</div>
</body></html>

Connexion

Pas encore inscrit ?

Modifier l'affichage du curseur

Messages recommandés

lomaster

Dylav

KewlCat

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer