onmouseover for imagemap

I do not know what type of map you use, but here is how I do:

<MAP NAME="yourmap">
<AREA SHAPE=CIRCLE COORDS="128,74,23" HREF="apage.htm" ONMOUSEOVER="window.status='A Page'; return true">
<AREA SHAPE=CIRCLE COORDS="199,80,25" HREF="anotherpage.htm" ONMOUSEOVER="window.status='Another page'; return true">
</MAP>
<IMG SRC="image/yourmap.jpg" USEMAP="#yourmap" BORDER="0">

Q-

You are asking one question, but I sense you may be trying to ask a different question.

If your question is "How do you trigger code when the mouse passes over an area defined in an imagemap" then martinag has the right answer:  simply place your "onMouseOver" event handler in the Area tag.  You should ask him to repost his comment as the answer.

If you question is "How do I achieve a specific effect with an imagemap, then martinag has the start, but we need to know what effect you are trying to achieve before we can write any code for you.

what I'm after is images changing for each part of the imagemap.

I have a selection of 2 images which make up the image map, and I want ONE of the two images to change for each part of the image map.  Will the above code work?

If you want to swap an image with the onMouseOver over you can with no problem even on image maps. It's no different than normal image swapping.  The problem is, with image maps, it's misleading because 1 portion of the image is triggering the event so sometimes people think that just that portion of the image should be able to be changed, and it's not possible.  If you want to change just that portion you have to change the entire image which is mapped with a small change to that portion which is to be different.

Also, IE 3 won't do the image swapping because it doesn't support the image object, but the rest of your target browsers do.
-Josh

The image map image itself it not changing on the onmouseover.. it's an image NEXT to it . . can someone post the code to do this? and you say IE3 doesn't support this no matter what?  but netscape 3 and up . . IE 4 and up will?

Yes that is correct.  N3+, and IE4+ should be ok with image swapping.
Here's some code to do this, it was taken right off of my web page.  If you'd like to see it working goto http://www.mcs.kent.edu/~jbirk.  ALso, I'm not using an image map, but all that is needed is placing the "onMouseOver()" event in the image map as martinag posted above.  ANyway, here's the code from my page:
<script language="JavaScript">
<!-- conceal
if (document.images)
{
OnCards = new Image(200,50);
OnCards.src = "images/cards_on.gif";
OffCards = new Image(200,50);
OffCards.src = "images/cards_off.gif";

OnFamily = new Image(200,50);
OnFamily.src = "images/Family_on.gif";
OffFamily = new Image(200,50);
OffFamily.src = "images/Family_off.gif";

OnWeb = new Image(200,50);
OnWeb.src = "images/web_on.gif";
OffWeb = new Image(200,50);
OffWeb.src = "images/web_off.gif";

OnResume = new Image(200,50);
OnResume.src = "images/resume_on.gif";
OffResume = new Image(200,50);
OffResume.src = "images/resume_off.gif";

OnLinks = new Image(200,50);
OnLinks.src = "images/links_on.gif";
OffLinks = new Image(200,50);
OffLinks.src = "images/links_off.gif";

OnHome = new Image(200,50);
OnHome.src = "images/home_on.gif";
OffHome = new Image(200,50);
OffHome.src = "images/home_off.gif";
}

function LightOn(img_name)
{if (document.images)
  document.images[img_name].src = eval("On"+img_name+".src");
}

function LightOff(img_name)
{if (document.images)
  document.images[img_name].src = eval("Off"+img_name+".src");
}

// reveal -->
</SCRIPT>
And then it's used with these lines:
<CENTER>
<TABLE cellspacing=0 cellpadding=0 border=0>
<TR><TD nowrap><A HREF="index.html" onMouseOver="LightOn('Home');" onMouseOut="LightOff('Home')"><img src="images/home_off.gif" name="Home" width=200 height=50 alt="Home" border="0"></A><A HREF="Resume/index.html" onMouseOver="LightOn('Resume');" onMouseOut="LightOff('Resume')"><img src="images/resume_off.gif" name="Resume" width=200 height=50 alt="My Resume" border="0"></A><A HREF="Family/index.html" onMouseOver="LightOn('Family');" onMouseOut="LightOff('Family')"><img src="images/Family_off.gif" name="Family" width=200 height=50 alt="Family and Friends" border="0"></A></TD></TR>
<TR><TD nowrap><A HREF="Web/index.html" onMouseOver="LightOn('Web');" onMouseOut="LightOff('Web')"><img src="images/web_off.gif" name="Web" width=200 height=50 alt="Web Publishing" border="0"></A><A HREF="cardsforsale/index.html" onMouseOver="LightOn('Cards');" onMouseOut="LightOff('Cards')"><img src="images/cards_off.gif" name="Cards" width=200 height=50 alt="CCG Cards For Sale" border="0"></A><A HREF="links.html" onMouseOver="LightOn('Links');" onMouseOut="LightOff('Links')"><img src="images/links_off.gif" name="Links" width=200 height=50 alt="Links" border="0"></A></TD></TR>
</TABLE></CENTER>

This could be ported rather easily if you catch onto the method I used.  If you would like help in porting it for your use, please post some of your code, or the url of the document, and I will try to get it working.
-Josh

i have a script that does exactly that now.  I want one that works with an imagemap..  by all means have a go :)

Thanks
Andrew

How about this:

<html>
<head>
   <title>Q's Imagemap</title>

<script>
<!-- conceal

function imageCall()
   {
   if (document.images)
      {
      var Image1 = new Image();
      Image1.src = "image1.gif";

      var Image2 = new Image();
      Image2.src = "image2.gif";
      }
   }


function imageSwap(Img,Src)
   {
   eval("document." + Img + ".src = " + Src);
   }

// reveal -->
</script>
</head>
<body onLoad="imageCall()">

Your page here...

<!-- the image that gets swapped out -->
<img name="Swap" src="blank.gif">


<!-- the image with the image map -->
<img name="Map" src="map.gif" usemap="#SwapMap">

<map name="SwapMap">
   <area shape="rect" coords="0,0,20,20"
      onMouseOver="imageSwap('Swap','image1.gif')"
      onMouseOut ="imageSwap('Swap','blank.gif')">
   <area shape="rect" coords="20,20,40,40"
      onMouseOver="imageSwap('Swap','image2.gif')"
      onMouseOut ="imageSwap('Swap','blank.gif')">
</map>


If you are confused by any section of this, just ask.  It should work fine once you plug in your specifics (like the map coordinates, and the image urls).

To answer your other question, neither IE3 nor Netscape 2 will be able to swap images without major Java coding -- not JavaScript, mind you, but Sun's Java -- and such a thing is turned of in many browsers.

the image that should be swapping is not swapping...

i added href="#thing" for the two parts of the image map as a test.. but still no go..

when outside one of the two defined areas I get a java script error in the status bar down the bottom..  this still doesn't work (netscape 4.5)  did you test it and have it working before posting it?  is it something I'm doing wrong ?

Could you post your code, so we can work with that?  Instead of giving you examples?  It might prove to be easier that way.
-Josh

oh no.. the code above is almost EXACTLY what I have.. if you can get it working. . let me know.

Thanks

Josh-

I don't understand how your code is different than mine, except that it preloads the images first and so therefore slows down the loading of the whole page.

The code I posted before worked fine on my local drive -- Mac Netscape 3/4 and IE4.  The "href" is needed for an onClick event, otherwise Javascript treats the area as an anchor.

Q: are you adding code to this?  The error you describe could not be made by my code, and therefore will not be solved by jbirk's code.  Josh has asked before: please, please post teh code you are using.  Your errors are stemming from that and I don't think it's fair to reject perfectly good answers for errors not generated by that answer...

Yes, I agree with Quixote, the problem is probably with however you are changing the code to fit your specific problem.  Please, reject my last answer (assuming it doesn't work with those slight changes), and post your code, so we can come up with a fix for it or at least duplicate the error.

-Josh

not sure what the difference was guys.. but it did the trick!  one last thing if you feel like posting a comment.  Can i get a mouseover to work with a form input type=image ? or can't that be done?

I could not find any reference to this in my book, but I went and tested it.  Netscape 4 does not even recognize the onmouseover event for input type=image, but IE 4 does recognize it.  I'm not sure how swapping the image will work (never had a need to do this before, and if I did I would probably just use a normal linked image which when clicked would submit the form, instead of dealing with these form image inputs which aren't as browser safe).
-Josh

"use a normal linked image which when clicked would submit the form"

please explain this.  I have a cgi script that works via forms and I use input type=image for most of the buttons.  Are you saying there IS another way of doing these as images so the onmouseover will work?

If you have a working answer.. am happy to make a new question with points :)

<A HREF="javascript:document.f.submit()">Submit</A>
f is the name of the form (<FORM NAME="f">)
Add your onMouseOver code to the link and insert the image code.

Martin

Yes, martinag has answered it for you :)
Note that this will only work if the action of your form is NOT a mailto.  JavaScript is not allowed to submit mailto actions for security reasons.  You said that you where using a cgi program so it will work fine for you.
-Josh

1 more thing someone might wanna help with... with the onmouseover for forms... if there are more than 1 submit options.. how does the script know which one it's submitting?

When submitted via JavaScript, no submit button is considered pressed.
If you are asking how it knows which form to submit if there are multiple different forms (presumably different actions), then that is implicit in the call to submit(), since you specify which form is being submitted.
In Martinag's example:
<A HREF="javascript:document.f.submit()">Submit</A>
the form which is submitted is the form the name "f", hence f.submit()

-Josh

no.. there is one form..  but multiple ways of submitting info to it.  It's based on the name of the image or value.  It then logs out or does this, or does that.

OK, well if the submission is done via a normal submit, then the receiving cgi code will receive the name and value of the submit button as form elements.  There was another question a little while ago about determining which button was pressed through javascript processing just before the submit, and basically the solution agreed upon was to make the buttons user defined so that you know which one was pressed.
-Josh

"make the buttons user defined so that you know which one was pressed."

err.. don't know how to do this :)

See question:
https://www.experts-exchange.com/topics/comp/lang/javascript/Q.10076854

I think it should be answered from that, and it is locked so it won't cost any points yet (hurry though, may be graded soon).  If you still have further questions you should ask a new question since this is a new question.

Best of luck!
-Josh

"make the buttons user defined so that you know which one was pressed."

err.. don't know how to do this :)

If you check out the question jbirk pointed you to I think the first answer (rejected but good) will work for you.
It is also possible to implement with links.

Martin

sorry I still can't get it to work.. can you give me a few more hints or example code ?

You should ask a new question since this is a new topic. (this page is getting rather long too)  :(

Good luck!
-Josh

done and done . . look for it in a sec :)