Blog d'aide de Blog4ever

Bonjour les blogonautes,

Je vais vous expliquer comment avoir un curseur qui change d'apparence selon la fonction,
...A savoir que si votre page est très longue, il reprendra son aspect initial ...windows...

Optez pour la version png, Elle vous permet de meilleurs résultats, Vous évite d'avoir à vous tourner vers la version curseur, qui nécessite un conteneur de forme carré, là où l'option png vous permet une forme rectangulaire,
...Je n'ai pas testé d'autres formes...

Si vous préférer une version curseur personnalisé, il vous faudra l'héberger auprès d'un site spécialisé comme...
Anonfiles
Ce, même si vous le réalisez via l'outil "icon" de photofiltre,
Autrement vous pouvez le créer via un logiciel gratuit à télécharger, RealWorld Cursor Editor par exemple, Ou un logiciel en ligne tel que...
Cursor
...L'option curseur vous permet de fixer un hotspot pour rendre votre pointer plus précis...

Oubliez le mode gif, Ça laisse un contour qui donne un effet des plus moches,
De plus, il a tendance à ne pas toujours fonctionner,

Il vous faut deux images exploitables ...dont le rendu, une fois les dimensions réduites, est top...

..Pour réaliser le mien en mode png, j'ai pris une image sur le net et un tube proposé par Soleilvie, je suis passé par le logiciel de réduction en ligne... 
Reduction
Via l'option réduction choisie, Adaptation automatique, 

Vos images, une fois réduites, ne doivent pas excéder les 100 pixels en largeur comme en hauteur,

...Mes images font 70x42 pour l'une, 56x70 pour l'autre...
...A savoir qu'en version curseur, elles ne peuvent faire plus de 64x64 et ça reste exceptionnel, Le standard étant de 32x32...

A installer dans votre css
...Changer les images par les vôtres...

/*test cursor*/

body {
cursor: url(https://zupimages.net/up/22/05/c35b.png), auto;
}

a {
cursor: url(https://zupimages.net/up/22/05/11kw.png), auto;
}

Comme il est impossible sans logiciel de faire une capture de son curseur, je vous ai fait un montage avec mes deux images,
Celui de la flèche bleue pointe vers les liens,
Le vert est le curseur qui se balade et survole la page,



Voilà,
Bonne soirée,
Mi Neth,

J'ai testé, 
Il est possible de convertir un curseur en fichier png pour avoir plus de facilité à l'héberger et l'installer dans un format plus grand, 
Je suis allée jusqu'au format 120x120 et c'est accepté, 
En revanche cela supprime le hotspot, 


J'avais créé ce curseur via le logiciel RealWorld Cursor Editor où son format par défaut était de 32x32 et l'ai converti en fichier png jusque 120x120,

Merci Mi Neth !

 Ni Neth
Je ne pense jamais à changer mon curseur mais je reviendrai ici pour savoir comment faire.
:sol:

Coucou les filles, 
Je viens d'emprunter deux nouveaux tubes dans le très joli catalogue que propose Soleilvie,  pour me faire des curseurs trop meugnons, 

Celui de la nana, je l'ai fais plus grand que le chaton pour que proportionnellement ce soit plus cohérent,  




Voili, voilou, 
Bonne journée, 
Mi Neth, :ch:

Bonjour, 

Comme c'est toujours bon à savoir, je partage l'info, 
Si vous installez un curseur animé ... dont le fichier se termine par ani... il ne s'animera que sous les dernières versions d'IE et sur Edge, 
Donc, si vous êtes sous un autre navigateur et que votre curseur ne s'anime pas, c'est normal, 
Vous pouvez toujours faire une image gif, Mais comme je l'ai dis,  ça fonctionne de façon aléatoire et plus souvent ça ne fonctionne pas, 

Bonne journée, 
Mi Neth, :oe:

Petit tuto pour simuler le hotspot de précision en version fichier png, 
...Excepté le petit cube qui a son importance, le choix des images est à titre démonstratif ... l'outil ligne évoqué simule une ficelle...

La première image représente le curseur que vous aurez choisi, Comme vous pouvez le voir ce chat se trouve dans un rectangle, Dans Fichier --- Nouveau via photofiltre créez un rectangle de mêmes dimensions, 
C'est la deuxième image où vous placerez le petit cube ...impérativement, dans l'angle haut droit...

;;;Euh, j'ai mis deux p à superposée sur l'image, L'avez pas vu, D'accord?

Ensuite placer en superposition ...avec l'option de transparence... une petite image pour agrémenter ...c'est facultatif... Ici, il s'agit d'un ballon en forme de cœur, 
...J'ai ajouter un trait avec l'outil ligne pour simuler une ficelle...

Il vous restera à coller votre image avec un fond transparent et d'enregistrer le résultat au format png, 









...Le petit coin sert de hotspot de précision pour mieux placer votre curseur sur votre page...

Voilà, une petite astuce toute bête, 

Dernière modification le mercredi 09 Février 2022 à 14:08:26

J'ai trouvé une idée plus originale d'avoir un hotspot, 
Il suffit de mettre un élément qui pointe en diagonale derrière l'objet, l'animal, le personnage... que l'on a choisi, 
-Une flèche derrière Guillaume,
-Une carotte derrière Bunny, 
-Un crayon derrière  Cabu,
-Un biberon derrière Baby,

J'ai mis des branches fleuries derrière la demoiselle et le chaton,