Red hand on image instead white in color.

**zohaib82** · Jan 2, 2013 01:50

Hi,

I have added HTML map on image and it shows white hand on image.

I want to show hand in red color instead of white.

Any idea?

Code:

<!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=utf-8" />
<title>Red Hand on Image</title>
</head>
<body>
	<img src="cup.jpg" width="225" height="225" usemap="#cupmap" border="0" />

	<map name="cupmap">
		<area shape="rect" coords="67,52,149,178" href="#" alt="Cup">
</map>
	
</body>
</html>

- Thanks
Zohaib.

**ronpat** · Jan 2, 2013 02:11

No, not enough information. Looking at your code I see no hands and no colors. We really need a link to your site so we can tell what is happening.

**MarPlo** · Jan 2, 2013 02:23

Hi,
You can use a custom cursor (an image), than in css use:

Code:

img cursor: url(cursor_file.cur),default;

You can find on the internet about "css custom cursor".

**zohaib82** · Jan 2, 2013 03:33

Hi,

Sorry forget to attached image cup.jpg and attached with this post.

I tried but not working for me.

Could you please give me an example.

cup.jpg

I got the file Red Hand Pointer.cur

I found following but not working for me

http://www.rw-designer.com/cursor-detail/36604

- Thanks
Zohaib.

**zohaib82** · Jan 2, 2013 05:36

I tried following but not giving result

Code:

<!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=utf-8" />
<title>Red Hand on Image</title>
<style type="text/css">
body {
	cursor: url(Hand.cur);
}
map:hover 
{
  cursor: url{Hand.cur}, auto;
}
</style>
</head>
<body>

<a href="#" style="cursor:url{Hand.cur}, auto;">Hand Pointer Pack Cursors</a>

	<img src="cup.jpg" width="225" height="225" usemap="#cupmap" border="0" />

	<map name="cupmap">
		<area shape="rect" coords="72,53,154,179" href="#" alt="Cup" style="cursor: url{Hand.cur}, auto;"/>
	</map>
	
</body>
</html>

http://www.rw-designer.com/cursor-detail/36604

- Thanks
Zohaib

**ParkinT** · Jan 2, 2013 06:07

Originally Posted by ronpat

No, not enough information. Looking at your code I see no hands and no colors. We really need a link to your site so we can tell what is happening.

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?

**TechnoBear** · Jan 2, 2013 08:27

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.

**Paul O'B** · Jan 2, 2013 08:52

Hi,

Your styles are all invalid as you have square brackets where you should have round brackets.

e.g.

Code:

url{Hand.cur}

It should be:

Code:

url(Hand.cur)

All the code you actually need is this:

Code:

<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>

Code:

<p class="cup"><a href="#"><img src="cup.jpg" width="225" height="225" alt="Cup" /></a></p>

No need for an image map and will work ok in IE as I have tested with the red hand image supplied.

**TechnoBear** · Jan 2, 2013 09:49

Off Topic:

Originally Posted by Paul O'B

Your styles are all invalid as you have square brackets where you should have round brackets.

I can't believe we all missed that.

Must have had too much ginger beer at New Year.

**zohaib82** · Jan 2, 2013 13:11

Many Thanks Paul O'B and Guys.

It is working on image but how to make it working part of image using map on image.

Code:

<!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 a {
	display:block;
	width:225px;
	height:225px;
}
p.cup a {cursor:url(hand.cur), pointer }
/* make sure the image is renamed to "hand" */
</style>
</head>

<body>
<p class="cup"><a href="#"><img src="cup.jpg" width="225" height="225" alt="Cup"  usemap="#cupmap"/></a></p>

<map name="cupmap">
	<area shape="rect" coords="64,45,146,171" href="#" alt="Cup" style="cursor:url(hand.cur), pointer"/>
</map>

</body>
</html>

hand.cur can be found at http://www.rw-designer.com/cursor-detail/36604

-Thanks
Zohaib.

**zohaib82** · Jan 2, 2013 14:15

Hi,

Solution is working for image and I need it image map+red hand solution.

basically in my project I have big image with multiple section.

I am going to add map on each section and show red hand only when mouse over that section.

Therefore I need solution with image map + red hand.

- Thanks
Zohaib.

**Paul O'B** · Jan 2, 2013 16:02

Hi,

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).

Code:

<!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>

**zohaib82** · Jan 2, 2013 23:07

Hi,

It is working on section of image.

I have multiple sections on image and show hand when mouse over that part of image.

In following example I have 3 awards color image red/blue/white.

Now when mouse over on each red/blue/whie then I want to show hand.

I have added red hand on first red color image and how to add for others?

Code:

<!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:13px;/* adjust to suit */
	top:18px;/* adjust to suit */
	width:64px;/* adjust to suit */
	height:45px;/* adjust to suit */
	background:#00FF00;	/* just for testing position - remove when aligned */
}

/* make sure the image is renamed to "hand" */
</style>
</head>
<body>
<p class="cup"><img src="awards.jpg" alt="Cup" /><a href="#"></a></p>
</body>
</html>

awards.jpg attachedawards.jpg

hand.cur can be found at http://www.rw-designer.com/cursor-detail/36604

This awards.jpg image is testing image in actual project I have big image with multiple sections.

- Thanks
Zohaib.

**Paul O'B** · Jan 3, 2013 03:47

Hi,

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.

Here is the revised code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Red Hand</title>
<style type="text/css">
ul.awards {
	list-style:none;
	margin:0;
	padding:0;
	width:276px;
	height:182px;
	float:left;
}
ul.awards li, ul.awards a, ul.awards span {
	width:92px;
	height:182px;
	overflow:hidden;
	position:relative;
	float:left;
}
ul.awards a, ul.awards span { cursor:url(images/hand.cur), pointer; }
ul.awards span {
	position:absolute;
	left:0;
	top:0;
	background:url(images/awards.jpg) no-repeat 0 0;
}
ul.awards li.award1 span{background-position:0 0}
ul.awards li.award1 a:hover span{background-position:0 100%}

ul.awards li.award2 span{background-position:-92px 0}
ul.awards li.award2 a:hover span{background-position:-92px 100%}

ul.awards li.award3 span{background-position:-184px 0}
ul.awards li.award3 a:hover span{background-position:-184px 100%}
/* make sure the image is renamed to "hand" */
</style>
</head>

<body>
<ul class="awards">
		<li class="award1"><a href="#">Award 1<span></span></a></li>
		<li class="award2"><a href="#">Award 1<span></span></a></li>
		<li class="award3"><a href="#">Award 1<span></span></a></li>
</ul>
</body>
</html>

With a live working example here complete with rollover effect using an enlarged sprite.

**zohaib82** · Jan 3, 2013 04:39

My Paul O'B many many thanks for support.

Please accept my apologize man.

I have only one big image and 3 to 6 section/part of image need to show hand.

One image with 6 awards description in each image section/part.

- Thanks
Zohaib.

**Paul O'B** · Jan 3, 2013 05:44

Originally Posted by zohaib82

I have only one big image and 3 to 6 section/part of image need to show hand.

One image with 6 awards description in each image section/part.

- Thanks
Zohaib.

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.

**zohaib82** · Jan 6, 2013 06:48

Hi,

I have attached my project image.

The area where Innovation and security award ,there I want to show red hand on mouse over and link to redirect user.

- Thanks
Zohaib.

**Paul O'B** · Jan 6, 2013 10:18

Hi,

Here's a simpler documented example that you should be able to follow.:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Red Hand</title>
<style type="text/css">
.wrap {
	width:746px;/* image width */
	height:121px;/* image height*/
	position:relative;/* stacking context for absolute anchor*/
	margin:10px;
}
.wrap img {
	display:block;
	background:red;/* for testing -please remove */
}
.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*/
	background:green;/* for testing -please remove */
	text-decoration:none;
	cursor:url(images/hand.cur), pointer;
}
.hotspot3 {
	left:400px;
	top:50px;
}
</style>
</head>

<body>
<div class="wrap"><img src="" width="746" height="121" alt="image description" /><a class="hotspot" href="#"></a></div>
<div class="wrap"><img src="" width="746" height="121" alt="image description" /><a class="hotspot2" href="#"></a><a class="hotspot3" href="#"></a></div>
</body>
</html>

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.

**zohaib82** · Feb 3, 2013 00:56

Hi Paul O'B,

Many thanks for support.

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"

https://www.dropbox.com/s/u3etd5ui7qyp5u0/redHand.rar

- Thanks
Zohaib.

**Paul O'B** · Feb 4, 2013 03:41

Hi,

It;s working everywhere apart from a bug in IE.

Add a 1px transparent gif image to the background here to make it work.

Code:

.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;
	background:url(fake.gif) no-repeat -1px -1px;
}

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.

User Tag List

Thread: Red hand on image instead white in color.

Thread Tools

Display

Red hand on image instead white in color.

Bookmarks

Bookmarks

Posting Permissions