cursor change on mouse over

[chelentano]

I have this image map and I need to change the cursor to finger on mouse over:

<map name="Map" >
<area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)">
<area shape="rect" coords="175,101,445,204" onClick="scr_valid(0)" >
</map>

Adding href (<area shape="rect" coords="175,100,445,203" onClick="scr_valid(0)" href="#" >) does not work. Any body could help please?
Thank you.

[A1ien51]

<area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)" onmouseover="this.style.cursor='hand'" >

[chelentano]

Originally posted by A1ien51
<area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)" onmouseover="this.style.cursor='hand'" >

Thank you, A1ian but it did not work: cursor did not change

[chelentano]

One more thing: I use IE5 but it should work in IE4+
Thank you

[brothercake]

to change a style attribute, you have to apply that attribute first, so

<area shape="rect" coords="0,61,121,140" style="cursor:default" onClick="scr_valid(1)" onmouseover="this.style.cursor='hand'" >

should work

[chelentano]

Originally posted by brothercake
to change a style attribute, you have to apply that attribute first, so

<area shape="rect" coords="0,61,121,140" style="cursor:default" onClick="scr_valid(1)" onmouseover="this.style.cursor='hand'" >

should work

Thank you brothercake but it did not work..

[Vladdy]

I have not worked with image maps but the way it should work for other elements is:
Cursor attribute is applied when the mouse is over the element, so you should not need the onmouseover. Just use
<area shape="rect" coords="0,61,121,140" style="cursor: pointer;">

Now if you want the "finger" cursor here is what I came up with....

[chelentano]

Originally posted by Vladdy
I have not worked with image maps but the way it should work for other elements is:
Cursor attribute is applied when the mouse is over the element, so you should not need the onmouseover. Just use
<area shape="rect" coords="0,61,121,140" style="cursor: hand;">

:D :D Now if you want the "finger" cursor here is what I came up with.... :D :D

Thank you Vladdy for the "finger". Hand would work just fine, but the script still does not work.

[Vladdy]

Can you please post the link to the page you are working on, that way it would be easier for everyone to analyse the problem you are experiencing. Also, be aware that IE4 and NS4 do not really support CSS and you may not be able to achieve the desired effect in those browsers. Consider breaking your image into seperate pieces the way your map is defined and putting them inside <a> tags with href defined as href="Javascript: scr_valid(1)"

[jkd]

If you are going to use W3C standard DOM scripting, why use invalid CSS2 property values?

"pointer" is the correct value to get the link pointer, "hand" is an invalid value supported by IE4 before the CSS2 specs were finalized. "pointer" is supported in IE6/Gecko/Opera.

[Vladdy]

I deleted my previous post because it was full of it...

what you want to do is:

<map name="Map" >
<area shape="rect" coords="0,61,121,140"
href="Javascript: scr_valid(1)">
<area shape="rect" coords="175,101,445,204"
href="Javascript: scr_valid(0)" >
</map>

[chelentano]

Vladdy you are good, thank you so much. Both ways work great (including getElementById).
I guess HREF is simpler and more compatible.

Thank you very much to all of you guys!!!
Great site.

chelentano

[Yashhotline]

Hi Guys,

HREF is really easy and good but in few browsers it leaves a dotted line around the mapped area. to fix this i tried following.

In the Map element (root element of area items) i used onmouseover and onmouseout events to change page cursors.

Following is code.

<map name="myLinks" id="myLinks" onmouseover="document.body.style.cursor='pointer';"
onmouseout="document.body.style.cursor='default';">
<area shape="poly" coords="98, 56, 113, 47, 133, 41, 149, 42, 165, 45, 178, 52, 184, 56, 189, 66, 186, 74, 176, 81, 158, 89, 138, 93, 118, 92, 98, 83, 91, 70"
onclick="javascript:location.href='about.aspx'" alt="About Deliver Plus" />
<area shape="poly" coords="33, 277, 41, 260, 57, 245, 79, 234, 107, 228, 122, 227, 143, 230, 149, 233, 160, 239, 167, 252, 167, 267, 161, 284, 144, 302, 122, 312, 94, 320, 62, 318, 40, 308, 32, 292"
onclick="javascript:location.href='Contactus.aspx'" alt="Contact Us" />
</map>


Enjoy.....

Happy Coding!!

[VIPStephan]

Why are you bringing up a seven year old thread and then just post useless crap? If you want to get rid of the dotted outline then set the outline style to “none” in the stylesheet.

area {outline: none;}

[willhendrix]

Hi Guys, Here is the perfect way to handle this for ALL situations with NO javascript

css rule ->

a:hover{
cursor: pointer;
 }

My fave use is for menus or tabs that perform ajax actions as achors need not have a target to have them appear as links

ie. <a>link</a> instead of <a href="whatever">link</a>

Another Tip...
If a number of links are calling the same function
Instead of assigning id's to all links u will use in js,
set an id to the containing div and use:

window.onload = init;

function init()
{
    var menu = document.getElementById("linksDivId");
    var allLinks = menu.getElementsByTagName("a");
    for(i = 0; i < allLinks.lenght; i++)
    {
        allLinks[i].onclick = clickHandler;
    }
}

function clickHandler()
{
    //Whatever you want to put here, use 'this' to reference allLinks[i]
}

The time I spent perfecting use cross of js and css was the best time ive ever spent regarding manipulation and interaction