Solved

onmouseover for imagemap

Posted on 1998-08-16
31
525 Views
Last Modified: 2012-08-14
Can I get some onmouseover code for imagemaps?  each part of the image map, has a different onmouseover command.  NEEDS to work with netscape 3&4, IE 3,4&5.

Andrew
q@qonline.com.au
0
Comment
Question by:Q010797
  • 13
  • 11
  • 4
  • +1
31 Comments
 
LVL 4

Expert Comment

by:martinag
Comment Utility
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">
0
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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.
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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

0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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
0
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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).
0
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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.
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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 ?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

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

Thanks
0
 
LVL 8

Accepted Solution

by:
jbirk earned 150 total points
Comment Utility
OK, there were a few problems with Quixote's code.  I will post a working version of it below.  Note that I changed the image names, because I needed valid names in order to test it properly.
      <html>
      <head>
         <title>Q's Imagemap</title>

      <script>
      <!-- conceal

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

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

            var Blank = new Image();
            Blank.src = "blank.gif";
}

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

      // reveal -->
      </script>
      </head>
      <body>

      Your page here...

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


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

      <map name="SwapMap">
         <area shape="rect" coords="0,0,20,20" HREF="JavaScript:void(0);"
            onMouseOver="imageSwap('Swap','Image1')"
            onMouseOut ="imageSwap('Swap','Blank')">
         <area shape="rect" coords="20,20,40,40"  HREF="JavaScript:void(0);"
            onMouseOver="imageSwap('Swap','Image2')"
            onMouseOut ="imageSwap('Swap','Blank')">
      </map>
</BODY></HTML>

The first thing that was causing a problem was the fact that the href was not supplied, but Q already mentioned that he added that.  The next changes that I made where just changes on the style.  All I did was use the objects created by the preloaded images instead of refering to the image directly.  This involved removing the function which preloaded the images, because the variables created by that function went out of scope as soon as it finished.  I also created a new object for the blank image.
The I changed ImageSwap function to use objects like I mentioned.

It should work now.  It was working on my hard drive in Netscape 3,4 and IE 4.

-Josh
0
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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...
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:Q010797
Comment Utility
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?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
"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 :)
0
 
LVL 4

Expert Comment

by:martinag
Comment Utility
<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
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
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.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
"make the buttons user defined so that you know which one was pressed."

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

Expert Comment

by:jbirk
Comment Utility
See question:
http://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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
"make the buttons user defined so that you know which one was pressed."

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

Expert Comment

by:martinag
Comment Utility
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
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
sorry I still can't get it to work.. can you give me a few more hints or example code ?
0
 
LVL 8

Expert Comment

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

Good luck!
-Josh
0
 
LVL 1

Author Comment

by:Q010797
Comment Utility
done and done . . look for it in a sec :)
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now