After reading the entire thread a few times, it appears the OP wishes the Browser’s cursor (hand) to be colored red as opposed to the default white.
I believe that is embedded in the browser’s code and cannot be altered externally (as with CSS).
Is anyone aware of a technique to include ‘custom’ cursors?
[FONT=Verdana]Which browser(s) are you testing this in? The SitePoint Reference shows that browser support is not consistent.
Are you sure your file path is correct? i.e. The image is named Hand.cur (not hand.cur or anything else), and is located in the root of your site and not in an image folder or similar.[/FONT]
Your styles are all invalid as you have square brackets where you should have round brackets.
e.g.
url{Hand.cur}
It should be:
url(Hand.cur)
All the code you actually need is this:
<style type="text/css">
p.cup a {
display:block;
width:225px;
height:225px;
}
p.cup a {cursor:url(hand.cur), pointer }
/* make sure the image is renamed to "hand" */
</style>
I still wouldn’t use an image map but simply absolutely place the anchor over the hotspot like so (unless you need irregular shapes and then it would need to be an image map).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Red Hand</title>
<style type="text/css">
p.cup {
width:225px;
height:225px;
position:relative;
}
p.cup a {
cursor:url(hand.cur), pointer;
position:absolute;
left:80px;/* adjust to suit */
top:100px;/* adjust to suit */
width:80px;/* adjust to suit */
height:30px;/* adjust to suit */
background:green;/* just for testing position - remove when aligned */
}
/* make sure the image is renamed to "hand" */
</style>
</head>
<body>
<p class="cup"><img src="cup.jpg" width="225" height="225" alt="Cup" /><a href="#"></a></p>
</body>
</html>
You have three images so you want three links containing each part of the image so you would have been better off with three images (one for each award) and just linking them in the normal way with no trickery needed at all.
However, we can use the image as a sprite and put it in the background of the three anchors. I’m assuming that you have three different destinations for each award.
So that image you supplied had nothing to do with what you wanted? I’m lost now
You need to rethink what you are doing into a more logical and semantic structure. You can’t just paint a big picture and then use an image map (unless it is really for something like a real map).
Notwithstanding the above the techniques I have showed in all the examples above will still cater for what you need. If you have smaller, larger or more target areas then just adjust the code accordingly to fit.
You will have to show me the image that you really wanted and then describe where the target areas are supposed to be.
Just adjust the positions, size etc to fit your requirements. Add more hotspots as required by using more classes as shown in the second example. The example has everything you need to do what you want so have a go for your self and if you are still stuck then post back with the code that you have been trying and we will point you in the right direction.
Currently If I remove green background then red hand on image area not coming and I want to show red hand on different area of image with link to redirect.
I want to know how to remove green background and add red hand on “Innovation Award” and “Security Award”
I have attached all files with example in following ulr and please check file “awardslatest2.htm”
Add a 1px transparent gif image to the background here to make it work.
.hotspot, .hotspot2, .hotspot3 {
position:absolute;
left:174px;/* position to fit*/
top:20px;/* position to fit*/
width:120px;/* size to fit*/
height:50px;/* size to fit*/
text-decoration:none;
cursor:url(images/hand.cur), pointer;
[B]background:url(fake.gif) no-repeat -1px -1px;[/B]
}
The fake image doesn’t have to exist for this to work but its better to make a 1px x 1px transparent gif to avoid missing image server log errors.
Must have had too much ginger beer at New Year. 
[/ot]