Simple cursor change/onmouseover question.

[Kainte]

I have a simple question that may have an even simpler answer than the one I'm looking for, but basically I have an imagemap, and a Javascript onclick option, however no cursor changes happen to signify it's a link. So I figured I needed an onmouseover function that changed the cursor, but I've had no luck.

Here's my code:

<script language=javascript>
function openmayhem()
{
window.open("<%= Request.ServerVariables ( "SERVER_HOST" ) %>/content/projects/mayhem.asp")
}

function overmayhem()
{
event.srcElement.style.cursor = "move"
}
</script>

And:

<img border="0" src="<%= Request.ServerVariables ( "SERVER_HOST" ) %>/interface/site-header2.gif" usemap="#projects">
<map id="projects" name="projects">
<area shape="rect" coords="10,110,75,125"
onclick="openmayhem()" onmouseover="overmayhem()" alt="Mayhem">
</map>

[scriptkeeper]

not sure but

<style>
map{cursor:hand;}
</style>


should work!

[Kainte]

Yeah, that probably works, but I just want it to turn into a new cursor when you hover over the link part of an imagemap. I can call a function using the onmouseover command, but I don't know the function syntax to use to change the cursor.

[scriptkeeper]

you could give it a name or id maybe then reference like this


<script language=javascript>
function clickMayHem()
{
window.open("<%= Request.ServerVariables ( "SERVER_HOST" ) %>/content/projects/mayhem.asp")
}
function overMayHem(id){
document.getElementById(id).style.cursor="hand";
}

And:

<img border="0" src="<%= Request.ServerVariables ( "SERVER_HOST" ) %>/interface/site-header2.gif" usemap="#projects">
<map id="projects" name="projects">
<area id="mayHem" shape="rect" coords="10,110,75,125"
onclick="clickMayHem()" onmouseover="overMayHem(this.id)" alt="Mayhem">
</map>

[Kainte]

I swear this code hates me, nothing seems to be working. I've searched this forum, google, and other programmers as well and I just can't seem to do anything that works.

[starZ]

function changeOverCursor() {
document.getElementById('boxImage').style.cursor='hand';
}
function changeOutCursor() {
document.getElementById('boxImage').style.cursor='default';
}

<area shape="poly" coords="1,128,124,113,140,134,119,164,119,202,93,209"
style="cursor:default"
onMouseOver="changeOverCursor();"
onMouseOut="changeOutCursor();" />


Good luck :o