Need HAND cursor over linked images

[Gordo]

Quite simply, I'm using a custom cursor (thanks QS) on this web site. A hand is used for hyperlinks. This works just fine for text links, but images keep the custom cursor.

How can I force (with CSS) a hyperlinked image to use the hand?

This may or may not matter, but the image for which I currently need help is a mapped image with two hot spots. If I had to, I guess I could cut it up and use individual images. But for now, I'd like to try and find a solution using my present design.

See the 'banner' image at the top (school and club names)? Those link respectively. I need a hand up there (pun intended).

www.BowieFootball.org

[cg9com]

If the image is in an anchor, shouldn't it behave the same anyway?

a img {
CSS
}

[MotherNatrsSon]

I am on a Mac using Netscape 7. I get a "hand" over the Bowie high school and Booster Club images as is...

MNS

[Gordo]

I appreciate the replies. But, I'm still not seeing the hand. I added in cg9com's suggestion. Unfortunately, I'm not completely versed in CSS coding. I just didn't realize I could put that line in there for an image attribute. Anyway, it does not appear to be a complete solution.

FYI -- I'm using IE6 on WinXP (Dell PC).

I think the issue may be the fact that it's one image with two hotspots; thereby using coding different than most.

I added in both IMG and AREA into the CSS:

A img {
CURSOR: pointer;
}
A area {
CURSOR: pointer;
}

Hmmm...any more ideas?

[Skyzyx]

First of all, custom cursors are IE/Win-only... that's why MNS is not seeing them.

The valid CSS way is cursor:pointer, but IE 4, 5, and 5.5 (for Windows) only supports cursor:hand. In order to not confuse all browsers, do this:


a {
cursor:pointer;
cursor:hand;
}

[Gordo]

Makes sense...but I'm still not getting my hand in IE6.

[meow]

I don't understand. Defualt for hot spots in an image map is pointer/hand anyway. :confused:

You would refer to it like so though:

area { ... }

area isn't enclosed in <a>...</a>, neither is the image.

But IIRC I don't think the cursor property works with image maps in any browser. God knows why. But I might be wrong.

[dga]

You could try this in each of your actual href links:

style="cursor:default;" or style="cursor:hand;"

[Gordo]

Well, I think I've tried just about everything.

I tested a normal linked image and the hand works. So, I'm thinking IE just won't allow me to get the hand when using a mapped image. So, I'll either break up the image or forget about the hand on this one.

I appreciate all of the comments, suggestions, and feedback.

[ReadMe.txt]

what meow said shbould work,

instead of using

a area {

}

just use

area {

}

[meow]

Yeah, should. Image maps seems to dislike styling.

[Arctic Fox]

Sorry Gordo, lightning took out my computer...

Have you tried these ideas?:


<map name="FPMap0_I1">

<area href="http://www.austinschools.org/bowie/"
alt="austinschools.org/bowie"
target="_blank" shape="rect"
coords="1, 0, 580, 36" style="cursor:pointer; cursor:hand;">

<area href="http://www.BowieFootball.org/"
alt="BowieFootball.org"
shape="rect"
coords="88, 41, 507, 91"
style="cursor:pointer; cursor:hand;">

</map>




<map name="FPMap0_I1"
style="cursor: url('Not_A_Real_File.cur');">

<area href="http://www.austinschools.org/bowie/"
alt="austinschools.org/bowie"
target="_blank" shape="rect"
coords="1, 0, 580, 36">

<area href="http://www.BowieFootball.org/"
alt="BowieFootball.org"
shape="rect"
coords="88, 41, 507, 91">

</map>

[Gordo]

Tried both, Arctic Fox. Neither work. After trying everything and anything, I really think it's a simple mapped image "area" issue that cannot be resolved. It's not the end of the world. I'll probably just have to split up the image when I get the time. I use mapped images on other sites though. So, it would have been nice to know how to do this. Plus, someone else may someday benefit from this thread. Irregardless, I (again) appreciate all the help I've received from those who posted here!