mardi 16 décembre 2014

#Curseurs #souris #icones

60gp.ovh.net/~toutla/graph/curseur.html
AlexPeattie
Auroras.free.fr/curseurs-animes.htm
Brankic1979
Clicpartout.com/curseurs/curseurs-animes-divers.php
Curseurs à gogo
Cursors-4u
DessinsOnWeb
DeviantArt
Dribbble
elements.envato.com/graphics/icons
Emocool
Enfuzed
FlatIcon
Font-Awesome
FontFabric
Fonts2U
Freebiesbug
Gloubiweb
GoSquared
Graphichive
IcoJam
IconExperience
IconFinder
IconMelon
IconShock
Juraspeleo.com/divers/windows/curseurs/curseurs.htm 
Lecoffredecasea.com/services/index.php?page=curseurs 
Metro UI
ModernUIIcons
MoveIcon
MrIcons
Noos.org/bureau/icones/
Noupe
Palaiszelda.com/economiseurs_icones.php 
Picons.me
Pixeden
PremiumPixel
SmashingMagazine
Speckyboy
Totally Free Cursors
Toucharger.com/images/curseurs/
Toutla.com/ressource-graphique/telechargement-curseurs-animes
UseIconic
Winportal.fr/s/curseurs-pour-souris

Pages web :

1. Choisir un curseur (extension .cur ou .ani uniquement !!!)
2. Héberger le curseur quelque part
3. Changer la ligne body dans le css:

body { margin:0px; font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; background: #000000; color: #000000; cursor:url("http://.../exemple.cur"); }

ou
<style type="text/css">
body {cursor: url(adresse http de votre curseur); }
</style>

ou après body
<span style="cursor:url(moncurseur.cur),auto"</span>
ou

body{
  cursor: crosshair;
}
img{
  cursor: wait;
}
a:link{
  cursor:  pointer;
}
ou
<p onmouseover="this.style.cursor='help'"> exemple </p> 

cursor: url('votre_curseur_perso.cur'), pointer; 
Ex:
cursor: url("images/cursor.png"), pointer;
 
Sur une image :
document.body.style.cursor = "url('ton_image.gif')";
<img style="cursor:pointer;" src=image.png" alt="image" />
OU
<A HREF="http://distributions.free.fr" onmouseover="f1.src='images/bouton2.GIF'" onmouseout="f1.src='images/bouton1.GIF'"><IMG SRC="images/bouton1.GIF" ALT="Page d'accueil" WIDTH=100 HEIGHT=39 BORDER=0 ALIGN=bottom name=f1 onload="tempImg=new Image(100,39);tempImg.src='images/bouton2.GIF'"></A>

Exemple de code :

<html><head>
<script type="text/javascript">
  function sourisOn() { document.images["unimage"].src="image2.gif" }
  function sourisOff() { document.images["unimage"].src="image3.gif"}
</SCRIPT>
</HEAD><BODY>

<A HREF="#" onmouseOver="sourisOn();" onmouseOut="sourisOff();">
<IMG SRC="image1.gif" name="unimage" border=0></A>
</body></html>

  Un exemple en CSS placé dans une " div " d'une page de votre site :
<html><head><title>ma apge avec un autre curseur</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<div style="background-color:#F8F8FF; padding:10pt; border:thin solid black; width:100%; cursor:crosshair;">
<p>Ceci est une DIV avec la mention <b>cursor:crosshair</b>.
Passez avec la souris sur ce passage...</p></div>

<!--etc... la suite de ma page -->
</body></html>
- Pour tester les différentes possibilités :
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Changer le curseur(la souris) par une image ou curseurs proposés en css</title>
        <style type="text/css">
                .curseur_normal
                {
                        cursor:default;
                }
                .curseur_auto
                {
                        cursor:auto;
                }
                .curseur_croix
                {
                        cursor:crosshair;
                }
                .curseur_aide
                {
                        cursor:help;
                }
                .curseur_move
                {
                        cursor:move;
                }
                .curseur_texte
                {
                        cursor:text;
                }
                .curseur_attente
                {
                        cursor:wait;
                }
                .curseur_pointer
                {
                        cursor:pointer;
                }
                .curseur_img
                {
                        cursor:url('curseur.gif'), default;
                }
                .curseur_n
                {
                        cursor:n-resize;
                }
                .curseur_s
                {
                        cursor:s-resize;
                }
                .curseur_e
                {
                        cursor:e-resize;
                }
                .curseur_w
                {
                        cursor:w-resize;
                }
                .curseur_ne
                {
                        cursor:ne-resize;
                }
                .curseur_nw
                {
                        cursor:nw-resize;
                }
                .curseur_se
                {
                        cursor:se-resize;
                }
                .curseur_sw
                {
                        cursor:sw-resize;
                }
                </style>
    </head>
    <body>
        <div>
            <em>(survolez les lignes pour voir les effets)</em>
            <h1>G&eacute;n&eacute;ral</h1>
            <span class="curseur_normal"><strong>Curseur normal:</strong> cursor:default;</span><br />
            <span class="curseur_auto"><strong>Curseur automatique:</strong> cursor:auto;</span><br />
            <span class="curseur_croix"><strong>Curseur croix:</strong> cursor:crosshair;</span><br />
            <span class="curseur_aide"><strong>Curseur aide:</strong> cursor:help;</span><br />
            <span class="curseur_move"><strong>Curseur d&eacute;placement:</strong> cursor:move;</span><br />
            <span class="curseur_pointer"><strong>Curseur main(pointeur):</strong> cursor:pointer;</span><br />
            <span class="curseur_texte"><strong>Curseur texte:</strong> cursor:text;</span><br />
            <span class="curseur_attente"><strong>Curseur attente(sablier):</strong> cursor:wait;</span><br />
            <span class="curseur_img"><strong>Curseur image:</strong> cursor:url('adresse_de_limage'), default;</span>
            <h1>Redimention</h1>
            <span class="curseur_n"><strong>Curseur redimetion nord(haut):</strong> cursor:n-resize;</span><br />
            <span class="curseur_s"><strong>Curseur redimetion sud(bas):</strong> cursor:s-resize;</span><br />
            <span class="curseur_e"><strong>Curseur redimetion est(droite):</strong> cursor:e-resize;</span><br />
            <span class="curseur_w"><strong>Curseur redimetion ouest(gauche):</strong> cursor:w-resize;</span><br />
            <span class="curseur_ne"><strong>Curseur redimetion nord est(haut droite):</strong> cursor:ne-resize;</span><br />
            <span class="curseur_nw"><strong>Curseur redimetion nord ouest(haut gauche):</strong> cursor:nw-resize;</span><br />
            <span class="curseur_se"><strong>Curseur redimetion sud est(bas droite):</strong> cursor:se-resize;</span><br />
            <span class="curseur_sw"><strong>Curseur redimetion sud ouest(bas gauche):</strong> cursor:sw-resize;</span><br />
            <br />
            <strong><em>Remarques:</em></strong><br />
            <ol>
                <li>Les curseurs images ne fonctionnes pas sous Netscape 6.x et IE 5.x</li>
                <li>n-resize = s-resize</li>
                <li>e-resize = w-resize</li>
                <li>ne-resize = se-resize</li>
                <li>nw-resize = sw-resize</li>
            </ol>
        </div>
    </body>
</html>
-Image qui suit la souris :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Image qui suit la souris</title>
    <script type="text/javascript">
        //<!--
                document.onmousemove = suitsouris;
                function suitsouris(evenement)
                {
                        if(navigator.appName=="Microsoft Internet Explorer")
                        {
                                var x = event.x+document.body.scrollLeft;
                                var y = event.y+document.body.scrollTop;
                        }
                        else
                        {
                                var x =  evenement.pageX;
                                var y =  evenement.pageY;
                        }
                        document.getElementById("image_suit_souris").style.left = (x+1)+'px';
                        document.getElementById("image_suit_souris").style.top  = (y+1)+'px';
                }
        //-->
        </script>
</head>
<body>
        <img src="image.png" alt="Image qui suit la souris" id="image_suit_souris" style="position:absolute;display:block;z-index:5;" />
</body>
</html>
Les navigateurs utilisent :
Internet Explorer 6.0 *.cur *.ani
Firefox (Gecko) Windows and Linux 1.5 (1.8) *.cur *.png *.gif *.jpg
Firefox (Gecko) 4.0 (2.0) *.cur *.png *.gif *.jpg *.svg
Safari (Webkit) 3.0 (522-523) *.cur *.png *.gif *.jpg

Acceptés par tous les navigateurs

  • auto : Aspect identique à celui du curseur par défaut sur la balise qui possède l'attribut, ne change rien.
  • crosshair : Curseur en forme de croix.
  • default : Curseur par défaut du navigateur. 
  • help : Curseur d'aide.
  • move : Curseur de déplacement.
  • pointer : Curseur en forme de main avec le doigt déplié.
  • progress : Curseur de progression. 
  • text : Curseur d'édition de texte.
  • wait : Curseur d'attente


Curseurs de redimensionnement

  • n-resize : Curseur de redimensionnement bas vers haut.
  • s-resize : Curseur de redimensionnement haut vers bas.
  • e-resize : Curseur de redimensionnement gauche vers droite.
  • w-resize : Curseur de redimensionnement droite vers gauche.
  • ne-resize : Curseur de redimensionnement bas-gauche vers haut-droite.
  • nw-resize : Curseur de redimensionnement bas-droite vers haut-gauche.
  • se-resize : Curseur de redimensionnement haut-gauche vers bas-droite.
  • sw-resize : Curseur de redimensionnement haut-droite vers bas-gauche.


Note : En fait, il est très simple de se rappeler toutes ces propriétés d'un coup.
n, s, e, w correspondent à nord, sud, est, ouest, c'est-à-dire haut, bas, droite, gauche.
Il suffit d'indiquer la direction vers laquelle doit pointer le curseur, suivi bien sûr de "-resize".

Non accepté par tous les navigateurs

Firefox et Opera, entre autres, ignorent ces directives.
  • inherit : Même curseur que la balise parente.
  • not-allowed : Curseur en forme de rond barré.
  • no-drop : Curseur en forme de main avec le doigt déplié et un rond barré.
  • col-resize : Curseur fait de deux traits verticaux avec une flèche de chaque coté.
  • row-resize : Curseur fait de deux traits horizontaux avec une flèche de chaque côté.
avec une image gif :
<style type="text/css">
Body {
cursor:url("http://tonsite.com/image-du-curseur.gif");
}
</style>

Convertir un .gif en .cur avec ImageMagick

convert mon_fichier.png mon_fichier.cur


un curseur :
<style type="text/css">
Body {
cursor:url("http://tonsite.com/dossier-image/image-du-curseur.cur");
}
</style>

une animation :
<style type="text/css">
Body {
cursor:url("http://tonsite.com/dossier-image/image-du-curseur.ani");
}
</style>
 

dans un css rajouter :
a:hover.moncurseur {
cursor: url(moncurseur.cur);
}

Dans le code source CSS de votre page web, ajoutez la ligne suivante :


    

  1. 
cursor: default
    

    2.

* Exemple / Démo :



http://www.ajaxblender.com/article-sou [...] rs/index.html


Javascript :















<script type=”text/javascript”>



$(document).ready(function(){



$(’#test-area’).mouseout(function(){



$(’#mycursor’).hide();



return false;



});



$(’#test-area’).mouseenter(function(){



$(’#mycursor’).show();



return false;



});



$(’#test-area’).mousemove(function(e){



$(’#mycursor’).css(’left’, e.clientX – 20).css(’top’, e.clientY + 7);



});



});



</script>















CSS















#test-area {



height: 200px;



border: 3px dashed #CCCCCC;



background: #FFFFFF;



padding: 20px;



cursor: url(./blank.cur), none;



}



#mycursor {



cursor: none;



width: 97px;



height: 137px;



background: url(”/article-sources/images/pointer-cursor.gif”) no-repeat left top;



position: absolute;



display: none;



top: 0;



left: 0;



z-index: 10000;



}













Html











<div id=”test-area”>



Move mouse over this area.



</div>



<div id=”mycursor”></div>








 


 


----


 


 

blogger-pourlesnuls.blogspot.fr/2012/08/changer-curseur-de-la-souris-sur-blogger.html 

chezdan8gdg1.blogspot.fr/p/curseur.html 

codes-sources.commentcamarche.net/source/43072-curseur-dynamique 

curseursgogo.free.fr/installation.htm 

developer.mozilla.org/fr/docs/Web/CSS/cursor 

www.javascriptkit.com/dhtmltutors/csscursors.shtml#rightcolumn

jquery.developpeur-web2.com/documentation/evenements.php 

tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html

www.tomsguide.fr/forum/id-555063/html-changer-image-survol-souris.html#4094604  

yves.marsal.free.fr/myoast03.htm 

www.w3.org/TR/CSS2/ui.html#cursor-props



---





Faire varier les curseurs 

HTML et CSS divers

 Jquery : Afficher un cadre au survol de la souris 



Les événements

Souris et DIV: gestion des évènements HTML

Une pluie d'étoiles qui suit votre curseur  





Default représente le curseur par défaut c'est à dire la flèche classique de votre souris. 



Vous pouvez le modifier par :

- text : le curseur "traitement de texte", idéal pour les littéraires.

- crosshair : un curseur en forme de croix, idéal pour les matheux.

- pointer : curseur en forme de main.

- Move : curseur de déplacement.

- Wait : curseur en forme de sablier.

- progress : curseur par défaut associé au curseur Wait.

- help : curseur avec un point d'interrogation.

- URL() : curseur en forme de stylo.



Quelques exemples de curseurs :






















    

  •  auto : curseur normal
    • 

  •  default : curseur standard
    • 

  •  crosshair : croix
    • 

  •  pointer : flèche
    • 

  •  move : croix avec flèches symbolisant la possibilité de déplacer l’élément
    • 

  •  n-resize : flèche pointant vers le haut (n : nord)
    • 

  •  ne-resize : flèche pointant vers le haut à droite (ne : nord-est)
    • 

  •  e-resize : flèche pointant vers la droite (e : est)
    • 

  •  se-resize : flèche pointant vers le bas à droite (se : sud-est)
    • 

  •  s-resize : flèche pointant vers le bas (s : sud)
    • 

  •  sw-resize : flèche pointant vers le bas à gauche (sw : sud-ouest)
    • 

  •  w-resize : flèche pointant vers la gauche (w : ouest)
    • 

  •  nw-resize : flèche pointant vers le haut à gauche (nw : nord-ouest)
    • 

  •  text : point d’insertion texte
    • 

  •  wait : attente (montre, ....)
    • 

  •  help : icone d’aide
    • 

  •  url([fichier]) : version graphique du curseur
    • 


surlapage.fr/widget/cursors-sur-la-page



<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowfall.min.js">

</script> 





Curseur : renne blanc

<style type="text/css">

body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier.cur), url(http://www.jimdo.com/l/usersnippets/rentier.png), auto !important;}

</style> 



Curseur : flocons de neige

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">

</script> 



Curseur : renne marron

<style type="text/css">

body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier2.cur), url(http://www.jimdo.com/l/usersnippets/rentier2.png), auto !important;}

</style> 



Curseur : étoiles et flocon de neige

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">

</script>

<style type="text/css">

body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/snowcurser.cur), url(http://www.jimdo.com/l/usersnippets/snowcurser.png), auto !important;}

</style> 



 Sapins blancs :

<style type="text/css">

body .hr {

background: url(http://www.jimdo.com/l/usersnippets/hr-snow-white.png);

background-position:right;

border: 0;

height: 47px;

}

</style> 



Sapins verts :



<style type="text/css">

body .hr {

background: url(http://www.jimdo.com/l/usersnippets/hr-snow-green.png);

background-position:right;

border: 0;

height: 47px;

}

</style>



ou



<script type="text/javascript" src="http://contes-de-web.fr/js/pluiedetoiles.js"></script>



ou  







$(function() {


$.getScript('http://www.aht.li/2266817/pluie-etoiles.js');


});


- Image qui suit le curseur en javascript :





<script type="text/javascript">

var x = 0;

var y = 0;



if (document.getElementById)

{

if(navigator.appName.substring(0,3) == "Net")

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = Pos_Souris;

window.onload = Bouge_Image;

}



function Pos_Souris(e)

{

x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;

y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;

}



posX = 0;

posY = 0;

anim = true;

oldpos = "image.gif";



function Bouge_Image()

{

if (document.getElementById && anim)

{

posX = posX+(((x-posX)+20)/15);

posY = posY+(((y-posY)+20)/15);

if(posX<x)

newpos='';

else

newpos='image.gif';

if(newpos!=oldpos)

{

document.tete.src=newpos;

oldpos=newpos;

}

document.getElementById("teteronde").style.top = posY+"px";

document.getElementById("teteronde").style.left = posX+"px";

tempo = setTimeout("Bouge_Image()", 15)

}

}



if(document.getElementById)

{

document.write('<div id="teteronde" style="position: absolute">');

document.write('<a href="#" 
onClick="anim=false;document.getElementById(\'teteronde\').style.visibility
 = \'hidden\';return(false)">');

document.write('<img src="" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');

document.write('</a>');

document.write('</div>');

}

</script>



Programmes de curseurs pour Ubuntu :

sudo apt-get install gcursor



Programmes de curseurs pour Windows : 

www.toucharger.com/windows/personnalisation-de-l-ordinateur/curseurs


Comment changer les icônes des dossiers dans la barre de lancement rapide Ubuntu.Tuto personnaliser










Publié par



à












































Aucun commentaire:















Enregistrer un commentaire


















        

      









Inscription à :
Publier les commentaires (Atom)







Archives du blog