Custom cursor on mouseover of mapped link

Simon Wigzell · Mar 3, 2005

I have an image with several links in it in mapped areas. I am using a
custom cursor on the page and would like to have a custom cursor appear on
mouse over of the mapped links. Something like:

This works for the body, font or img tag:

<body style="cursor: url('cursor2.cur')">
Text
<img style="cursor: url('cursor1.cur')" src="...etc...">

This does not work for an area tag:

<AREA style="cursor: url('cursor1.cur')" shape=RECT coords=96,30,246,46
href="...etc...">

I'm think I will need to go to onmouseover/onmouseout functions to set the
style for an area tag? Thanks!

DU · Mar 4, 2005

Simon said:
I have an image with several links in it in mapped areas. I am using a
custom cursor on the page and would like to have a custom cursor appear on
mouse over of the mapped links. Something like:

This works for the body, font or img tag:

<body style="cursor: url('cursor2.cur')">
Text

I would not style the body and font with custom cursor. You also need to
provide a default cursor value in case the referenced resource (custom
cursor) is not fetched, loaded and rendered. Right now, only MSIE 6
supports (static, not animated) custom cursors. The next release of
Mozilla should also support custom cursors (not all types though).

<img style="cursor: url('cursor1.cur')" src="...etc...">

You also need to indicate the usemap attribute.

This does not work for an area tag:

<AREA style="cursor: url('cursor1.cur')" shape=RECT coords=96,30,246,46
href="...etc...">

You should always quote your attribute value of all your attributes.
"Why attribute values should always be quoted in HTML"
http://www.cs.tut.fi/~jkorpela/qattr.html

Does your document markup code and CSS code validate?
Can you provide the url?

I'm think I will need to go to onmouseover/onmouseout functions to set the
style for an area tag? Thanks!

In my opinion, you will confuse the user with so many custom cursors.
Custom cursors should be used sparingly and for very good reasons, like
identifying links which will open a new window (or recycle an already
opened window).

Your post has nothing really to do with javascript; you should have
posted your question in a css newsgroup/forum.

DU

Simon Wigzell · Mar 4, 2005

DU said:
I would not style the body and font with custom cursor. You also need to
provide a default cursor value in case the referenced resource (custom
cursor) is not fetched, loaded and rendered. Right now, only MSIE 6
supports (static, not animated) custom cursors. The next release of
Mozilla should also support custom cursors (not all types though).

You also need to indicate the usemap attribute.

You should always quote your attribute value of all your attributes.
"Why attribute values should always be quoted in HTML"
http://www.cs.tut.fi/~jkorpela/qattr.html

Does your document markup code and CSS code validate?
Can you provide the url?

In my opinion, you will confuse the user with so many custom cursors.
Custom cursors should be used sparingly and for very good reasons, like
identifying links which will open a new window (or recycle an already
opened window).

Your post has nothing really to do with javascript; you should have posted
your question in a css newsgroup/forum.

DU

Thanks, but the question was "how do a make a custom cursor work for an
area". The examples I gave were for doing it in CSS which does not work for
area so I was hoping there would be a javascript answer. It looks like all
you have done is glance at the CSS examples I gave and have completely
ignored the actual question!

Danny@Kendal · Mar 4, 2005

Simon Wigzell said:
I have an image with several links in it in mapped areas. I am using a
custom cursor on the page and would like to have a custom cursor appear on
mouse over of the mapped links. Something like:

This works for the body, font or img tag:

<body style="cursor: url('cursor2.cur')">
Text
<img style="cursor: url('cursor1.cur')" src="...etc...">

This does not work for an area tag:

<AREA style="cursor: url('cursor1.cur')" shape=RECT coords=96,30,246,46
href="...etc...">

I'm think I will need to go to onmouseover/onmouseout functions to set the
style for an area tag? Thanks!

Try this instead
map{cursor

ointer}

Doesn't work for Firefox though.

Slideshow not working properly	2	Jan 7, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
How can I add arrows to my FAQ	0	Aug 9, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Why <link/> is not working?	4	Jan 1, 2020
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023

Custom cursor on mouseover of mapped link

Simon Wigzell

DU

Simon Wigzell

Danny@Kendal

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads