?
Solved

javascript onclick with hand cursor? Should be easy?

Posted on 2003-03-26
11
Medium Priority
?
2,408 Views
Last Modified: 2008-02-01
hello, I have an image map that changes based on where the user clicks. It is done using javascript and works great. However I can not get the cursor hand to display over the map area. I am not using a normal Href in the image map I am using a onclick event to swap the image and the image map name.  Below you can see i tied to add a OnMouseOver event but still no luck.


I have my css up top.
<style type="text/css">
<!--
.cursor {  cursor: hand}
-->
</style>


Here is the map.
<map name="world">
    <area shape="polygon" coords="29, 44, 18, 126, 33" onclick="javascript:wm(1);return false;" OnMouseOver="this.className='cursor';">
</map>

Here is the image with the map.
<img border="0" src="images/worldmap.gif" name="Map" useMap="#world">

I cant get the cursor to show. I know it should be easy... any ideas? Thanks in advance
0
Comment
Question by:Smeegel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 

Expert Comment

by:FenomenO
ID: 8211125
Hi,just try these it works fine on IE:


onMouseOver="this.style.cursor='hand'"

so your html tag will be:

   <area shape="polygon" coords="29, 44, 18, 126, 33" onclick="javascript:wm(1);return false;" onMouseOver="this.style.cursor='hand'">


Let me know.


FenomenO
0
 

Author Comment

by:Smeegel
ID: 8211248
Nope, same thing nothing happens on mouseover. strangeness.... arg
0
 

Expert Comment

by:FenomenO
ID: 8211299
try to put it before the OnClick:

<area shape="polygon" coords="29, 44, 18, 126, 33" onMouseOver="this.style.cursor='hand'" onclick="javascript:wm(1);return false;">

which browser are you using?????

FenomenO
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Expert Comment

by:FenomenO
ID: 8211330
Alternatively put it on the image tag:


<img border="0" src="images/worldmap.gif" name="Map" useMap="#world" onMouseOver="this.style.cursor='hand'">

FenomenO
0
 

Accepted Solution

by:
FenomenO earned 60 total points
ID: 8211535
Alternatively put it on the image tag:


<img border="0" src="images/worldmap.gif" name="Map" useMap="#world" onMouseOver="this.style.cursor='hand'">

FenomenO
0
 

Author Comment

by:Smeegel
ID: 8211548
Hey figured it out, all i needed to add was a href = "#"

<area href ="#"shape="polygon" coords="29, 44, 18, 126, 33" onclick="javascript:wm(1);return false;">

Thanks
0
 

Author Comment

by:Smeegel
ID: 8211552
thanks for the help though. :) i'll award you the point.
0
 

Author Comment

by:Smeegel
ID: 8211560
Great response time, Thanks
0
 

Expert Comment

by:vthoang
ID: 8211582
funny thing about image map, they don't like styles too much.
try:
<map name="world">
   <area href="somefunnytext" onclick="javascript:wm(1);return false;" style="cursor:hand" shape="poly" coords="29, 44, 18, 126, 33">
</map>

or even

<map name="world">
   <area href="javascript:wm(1);return false;" style="cursor:hand" shape="poly" coords="29, 44, 18, 126, 33">
</map>

although i'd put my return false in the wm() function to clean it up a little..
0
 

Expert Comment

by:FenomenO
ID: 8211588
Glad to be helpful!!!
FenomenO
0
 

Expert Comment

by:vthoang
ID: 8211593
<map name="world">
  <area href="javascript:wm(1);return false;"  shape="poly" coords="29, 44, 18, 126, 33">
</map>

typo...
you can leave out
style="cursor:hand"
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…
Introduction to Processes
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question