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

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

Change Cursor

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



"cursor" Example

    
<html>
<body>
<div class="explanations" 
     style="background-color:#dddddd; 
            cursor:hand;">
            Move the mouse over this element to see the hand cursor.
</div>
</body>
</html>



cursor: move

 
<!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>
        <div>cursor
        </div>
    </body>
</html>



cursor: url("ani.ani")

 
<!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>
        <div>
        </div>
    </body>
</html>



cursor: wait

 


<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>
  <div id="content">
<h2>Heading in DIV</h2>
<p>A <a href="http://www.wbex.ru">A LINK</a>. <a href="http://www.wbex.ru">Another link</a></p>


  </div>
  </body>
 </html>



Mouse cursor List

<html>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<span style="cursor:auto"> Auto</span><br />
<span style="cursor:crosshair"> Crosshair</span><br />
<span style="cursor:default"> Default</span><br />
<span style="cursor:pointer"> Pointer</span><br />
<span style="cursor:move"> Move</span><br />
<span style="cursor:e-resize"> e-resize</span><br />
<span style="cursor:ne-resize"> ne-resize</span><br />
<span style="cursor:nw-resize"> nw-resize</span><br />
<span style="cursor:n-resize"> n-resize</span><br />
<span style="cursor:se-resize"> se-resize</span><br />
<span style="cursor:sw-resize"> sw-resize</span><br />
<span style="cursor:s-resize"> s-resize</span><br />
<span style="cursor:w-resize"> w-resize</span><br />
<span style="cursor:text"> text</span><br />
<span style="cursor:wait"> wait</span><br />
<span style="cursor:help"> help</span>
</body>
</html>



The cursor Property

 

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