HTML and Code design insider tricks

Setting the cursor to another shape using mouse rollover

 

Image used - NONE

 

See-How its done

Will only work for IE 5 (or higher) as it uses internal events in the Browser.  This technique uses a simple anchor tag and the style property.  Therefore on mouse rollover the cursor changes to the shape specified by the style.  Once the link text is clicked on it acts as a simple hyperlink and sends the browser to the address specified.

Well that's the theory - try moving the mouse over and clicking on the examples below and See-How it works.

 

HTML CODE - Setting a new cursor control on rollover

<a HREF="http://www.see-search.com" STYLE="cursor: auto">cursor:auto</a>

<a HREF="http://www.see-search.com" STYLE="cursor: crosshairs">cursor:auto</a>

<a HREF="http://www.see-search.com" STYLE="cursor: default">cursor:default</a>

<a HREF="http://www.see-search.com" STYLE="cursor: e-resize">cursor:e-resize</a>

<a HREF="http://www.see-search.com" STYLE="cursor: hand">cursor:hand</a>

<a HREF="http://www.see-search.com" STYLE="cursor: help">cursor:help</a>

<a HREF="http://www.see-search.com" STYLE="cursor: move">cursor:move</a>

<a HREF="http://www.see-search.com" STYLE="cursor: n-resize">cursor:n-resize</a>

<a HREF="http://www.see-search.com" STYLE="cursor: ne-resize">cursor:ne-resize</a>

<a HREF="http://www.see-search.com" STYLE="cursor: nw-resize">cursor:nw-resize</a>

<a HREF="http://www.see-search.com" STYLE="cursor: pointer">cursor:pointer</a>

etc

 

Simply passover the links below to see the effects

cursor: auto cursor: nw-resize
cursor: crosshair cursor: pointer
cursor: default cursor: s-resize
cursor: e-resize cursor: se-resize
cursor: hand cursor: sw-resize
cursor: help cursor: text
cursor: move cursor: w-resize
cursor: n-resize cursor: wait
cursor: ne-resize .