Entry
JavaScript: Mouse: Cursor: How to change cursor shape when moving over e.g. a picture [hand]
Apr 8th, 2006 17:27
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 09 April 2021 - 00:22 am ----------------------
JavaScript: Mouse: Cursor: How to change cursor shape when moving over
e.g. a picture [hand]
---
Set e.g. the attribute
style.cursor
of the current object (which is named 'this')
to the desired shape the mouse cursor.
===
Steps: Overview:
1. -Create e.g. the following program
--- cut here: begin --------------------------------------------------
<!-------------------------------------------------------------------->
<HTML>
<!-------------------------------------------------------------------->
<IMG
SRC="c:\\bbc\\taal\\fotoknud.jpg"
ONMOUSEOVER="this.style.cursor='hand';"
ONCLICK="alert( 'hello' );"
>
<!-------------------------------------------------------------------->
</HTML>
<!-------------------------------------------------------------------->
--- cut here: end ----------------------------------------------------
2. -Save this program e.g. as
myFilename.htm
3. -Here
1. -SRC gives the (e.g. full) path to your picture
(note: use \\ or / to separate, because
JavaScript wants this)
2. -ONMOUSEOVER event tells when moving the mouse over the
picture, it should do something.
In this case change the mouse cursor shape to a 'hand'
3. -ONCLICK event tells when you click with your mouse on that
object (here a picture), it should do something.
In this case change the mouse cursor shape to a 'hand'
4. -If you run this file in your browser, when you move
your mouse cursor over the picture, it will change
in a hand. When you click on the picture, it will
show a message 'Hello'.
===
Internet: see also:
---
Custom CSS Cursors
http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
----------------------------------------------------------------------
