How to specify a cursor for a Map Area?

M

Martin

I have an image with several areas designated as a map. I would like
to have the cursor change to something different when it's over one of
the areas. Is there a way to do this?

I've tried specifying: style="cursor:hand" in both the MAP element and
in the AREA element but nothing happens.

Suggestions?
 
J

Jan Clemens Faerber

Martin said:
I've tried specifying: style="cursor:hand" in both the MAP element and
in the AREA element but nothing happens.
Click to expand...

Is "hand" a common curser attribute?
 
J

Jan Clemens Faerber

Maybe you can fix it like this:

<html><head><title>position</title>
<style type="text/css">
<!--
body { }
#box1 { position:absolute; top:10px; left:10px; width:150px; height:150px;
z-index:1; }
#box2 { position:absolute; top:40px; left:40px; width:100px; height:100px;
z-index:2; }
#box3 { position:absolute; top:80px; left:50px; width:150px; height:150px;
z-index:3; }
#box4 { position:absolute; top:40px; left:20px; width:70px; height:70px;
z-index:1; }
#box5 { position:absolute; top:60px; left:10px; width:80px; height:80px;
z-index:2; cursor:hand; }
#box6 { position:absolute; top:20px; left:50px; width:90px; height:90px;
z-index:-1; }
-->
</style>
</head><body bgcolor="FFFFFF" text="#000000">

<div id="box1" style="background:red; border:solid 2px blue;">box1</div>
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>
<div id="box3" style="background:yellow; border:solid 2px red;">box3
<div id="box4" style="background:gold; border:solid 2px
green;">box4</div>
<div id="box5" style="background:lime; border:solid 2px
navy;">box5</div>
<div id="box6" style="background:red; border:solid 2px
blue;">box6</div>
</div>

</body></html>
 
J

Jukka K. Korpela

Jan Clemens Faerber said:
Maybe you can fix it like this:
Click to expand...

Fix what? You seem to be commenting on your own comment on speciying a
cursor for a map area, and what you have is game of <div>s.
 
J

Jukka K. Korpela

Martin said:
I have an image with several areas designated as a map. I would like
to have the cursor change to something different when it's over one of
the areas. Is there a way to do this?
Click to expand...

Maybe. You could try setting the cursor property in CSS. But usual CSS
caveats apply ( http://css.nu/pointers/CSS-caveats.html ).
I've tried specifying: style="cursor:hand" in both the MAP element and
in the AREA element but nothing happens.
Click to expand...

Trying with values defined in CSS specifications don't make anything
happen either, on IE. It seems that IE does not support the cursor
property for AREA elements. So usual CSS caveats really apply.

I think you need to re-think why you would like to gave the cursor
change. Is this a game where it is essential to obfuscate the user
interface? In that case, you probably need to use something completely
different than an HTML map. For example, Flash or Java.
 
M

Martin

On Wed, 1 Sep 2004 05:30:55 +0000 (UTC), "Jukka K. Korpela"

I think you need to re-think why you would like to gave the cursor
change. Is this a game where it is essential to obfuscate the user
interface? In that case, you probably need to use something completely
different than an HTML map. For example, Flash or Java.
Click to expand...

The way I see it, the cursor needs to change when over a clickable map
area simply to indicate that it's "clickable".

As a user moves around a "normal" web page, links and images that are
clickable show themselves as being such by the cursor changing to a
pointing hand (usually). I think that this makes for a very intuitive
interface - quite the opposite of obfuscating it.

If I can't get the cursor to change when over the map, then I will
have to put a message on the page that tells the user to click on the
map. In this case, the image takes up the entire page so any
explanative text will not be immediately visible. I'm already using
tool-tips but of course, it takes a second or two of non-motion for
them to show up.

I'll see what I can do with onmouseover.
 
J

Jan Clemens Faerber

Jukka said:
Fix what? You seem to be commenting on your own comment on speciying a
cursor for a map area, and what you have is game of <div>s.
Click to expand...

I found that the cursor style attribute cant´t be defined
anymore further in a <div> tag if it is overlapping an <area>
in an image map.

BUT you can define <div> sections outside any <area>s
with specific defined cursors.

So if you have an image map with <area>s that have
any defined >> href << attributes you will see
the cursor as a hand anyway.
If they don´t have any >> href <<s defined
it depends on the browser if you can see
the cursor defined in the <img> of the image map
or of <body> or whatever. But you can not overwrite this.

If you have <area>s without any links then you can
replace them by <div> sections if a rectangle is fullfilling
your needs and if you only intend to change the
appearence of the cursor in some places.
Then you can set the >> style << attribute of
those <div> tags with >> ="curser:hand" << or any other cursor styles
you wish.

I tried to do this here: http://213.47.90.11/alt.html/cursor.html
but I don´t include the html code at the end of my message
to reduce the size of my reply in this newsgroup.

Maybe there is still a ("better") way to define the cursor
in an <area> by any other cursor styles and I follow
the OP´s question: Suggestions?

Jan

BTW Jukka: On your page http://www.cs.tut.fi/~jkorpela/www.html#css
the colour of the text of the links changes from blue to red by
moving the cursor over it.
But not always. Why this?
 
J

Jan Clemens Faerber

Jan said:
So if you have an image map with <area>s that have
any defined >> href << attributes you will see
the cursor as a hand anyway.
If they don´t have any >> href <<s defined
it depends on the browser if you can see
the cursor defined in the <img> of the image map
or of <body> or whatever. But you can not overwrite this.
Click to expand...

Oh ... Now I found a funny effect!!
If you use mozilla and define <img style="cursor:wait" ...>
for the image of the image map the cursor
in an <area> appears as the sand watch.

So it is very dependent on the browser you use.

Jan
 
J

Jukka K. Korpela

Martin said:
The way I see it, the cursor needs to change when over a clickable map
area simply to indicate that it's "clickable".
Click to expand...

Well, "needs" is a strong word. It may _help_. And shouldn't it be made
obvious to the user - typically, explaining it in words - that an image
is clickable? If that's not obvious, how does it help that he _would_ see
the cursor change (though maybe not notice it) _if_ he moved the cursor
(well, pointer) over it?
As a user moves around a "normal" web page, links and images that are
clickable show themselves as being such by the cursor changing to a
pointing hand (usually).
Click to expand...

Do you mean that this does _not_ happen for your image map, on some
browser(s)? Which page, which browsers?
If I can't get the cursor to change when over the map, then I will
have to put a message on the page that tells the user to click on the
map.
Click to expand...

Shouldn't you do that anyway?
In this case, the image takes up the entire page so any
explanative text will not be immediately visible.
Click to expand...

Entire page? Well, if that's the problem, fix it by adding explanatory
text at the start. (It will also entertain the user while he waits for
the image to get downloaded.)
I'll see what I can do with onmouseover.
Click to expand...

We already know that you cannot do anything unless scripting is allowed
in the browser.
 
N

Nilson

Joined
Nov 14, 2007
Messages
1
Reaction score
0
Javascript will work

Hi, I've done it with Javascript:

<area (...) onMouseOver="document.body.style.cursor = 'fill in the cursor you want';" onMouseOut="document.body.style.cursor = 'fill in the cursor you want outside the area';">

it works with IE7, not with Firefox or Opera. I didn't try older IEs. Of course Javascript has to be turned on, so you should take care about those who turned it of.

Nilson
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to specify a search query when I want to create an application in C++ with the option to open files? 0
How to go about building a crud app when you are a noob 1
image map, javascript 9
Spring Boot Request Mapping: How to Handle Multiple Request Paths in a Controller 1
I Need Help with making a function that draws in a canvas using location data. 1
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
How to make a flex box inherit its parent (container) background. 0
I need help making a zooming function 11

Members online

No members online now.
Total: 25 (members: 1, guests: 24)
Robots: 242

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top