Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Modifier l'affichage du curseur

lomaster

Par lomaster
dans Programmation

 Partager

Messages recommandés

lomaster Extrem Member

lomaster

Posté(e)
Posté(e)

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

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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 »

Lien vers le commentaire
Partager sur d’autres sites
  • 2 semaines après...
KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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>

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...