HTML/CSS/CSS Attributes and Javascript Style Properties/cursor

Материал из Web эксперт
Перейти к: навигация, поиск

Change Cursor

   <source lang="html4strict">

<html> <head> <style type="text/css"> .xlink {cursor:crosshair} .hlink{cursor:help} </style> </head> <body> <a href="http://www.wbex.ru" class="xlink">CROSS LINK</a>
<a href="http://www.wbex.ru" class="hlink">HELP LINK</a> </body> </html> 


      </source>


"cursor" Example

   <source lang="html4strict">

<html> <body> 

           Move the mouse over this element to see the hand cursor.

</body> </html> 


     </source>


cursor: move

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           div {
               cursor: move;
               border: thin solid black;
               width: 100px;
               height: 100px;
           }
       </style>
   </head>
   <body>
cursor 
   </body>

</html> 

</source>


cursor: url("ani.ani")

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

   <head>
       <title></title>
       <style type="text/css">
           div {
               cursor: url("ani.ani");
               border: thin solid black;
               width: 100px;
               height: 100px;
           }
       </style>
   </head>
   <body>

   </body>

</html> 

</source>


cursor: wait

   <source lang="html4strict">


<html xmlns="http://www.w3.org/1999/xhtml"> 

 <head>
   <title></title>
   <style type="text/css">
   body {
     margin: 15%;
   }
   a:link {
   cursor: wait;
   }

   </style>

 </head>
 <body>

Heading in DIV

A <a href="http://www.wbex.ru">A LINK</a>. <a href="http://www.wbex.ru">Another link</a>


 </body>
</html>
</source>


Mouse cursor List

   <source lang="html4strict">

<html> <body>

Move the mouse over the words to see the cursor change:

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help </body> </html> 

      </source>


The cursor Property

   <source lang="html4strict">

Value Description auto Shape of the cursor depends on the context area it is over crosshair A crosshair or plus sign default Usually an arrow pointer A pointing hand (in IE 4 this value is hand) move A grasping hand (ideal if you are doing drag-and-drop DHTML) e-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resize text The I bar wait An hour glass help A question mark or balloon, ideal for use over help buttons <url> The source of a cursor image file 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/cursor&oldid=4829»