Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cursor change on mouse over

    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.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    <area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)" onmouseover="this.style.cursor='hand'" >

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE5

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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....
    Attached Files Attached Files
    Last edited by Vladdy; 12-10-2002 at 07:04 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #8
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)"
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #12
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It works!

    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

  • #13
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

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

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,676
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.
    Code:
    area {outline: none;}

  • #15
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Css sudo emelemts to the rescue

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

    css rule ->
    Code:
    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:
    Code:
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •