Printable View
is there a way to invoke onmouseover event on image map in NS4?
What I created works perfectely for IE and NS6, but NS4 doesn't recognize onmouseover event when you use image maps (it works without the map, but I need to use one).
Any info woul be appreciated. If NS 4 doesn't support that event in that situation is there any workaround?
Thanks
Spike
if it doesn't work, you might want to split the image and assembly it in a borderless table, then use the onmouseover for the various table cells. It's a bit of work, but if it the only thing to do, I find it to be a good work-around.
:)
the worst thing is that the image is a pie chart (so obviously it is round) and if I'd split the picture I would never be able to put them back together using tables (I did it before using simple rectengular images though). I don't even know if it is possible using layers or something like that.
Thanks for your reply though
Spike
can we have a look at your code, because I'm sure I've done an onmouseover event on an image map before!
yeah, sure just go to www.geocities.com/zarembisty/incometax.html (that's the test website).
As I said it works in IE and NS6+, but NS4 doesn't seem to recognize that there should be a onmouseover() event trigged on the image map.
Thanks for help
Spike
P.S. There is one thing that bothers me too. Go to that web site using IE (version 6 at least) and move your cursor over the chart few times (you'll have to press the button first). Now when you move your mouse from one part of the chart (for example Interest on Debt) to the other (for example Military) two events are trigged in IE6 - onmouseout of the interest on debt part of the image and onmouseover of the military part. Now the question: is there a way to stop the onmouseout event from being trigged, unless the user moves the mouse entirely off the image (i.e. as opposed to moving it to a different part of the image). IHYKWIM
Thanks
Spike
You'll kick yourself when you find out what you've done wrong!
The only thing that's missing and stopping it from working in NS 4 is
href="#"
this is what your new map should look like!
Iv'e added the href="#" for you!
That one was hard to spot especially when IE and NS6 didn't have a problem with it!Code:<map name="ch_map">
<area href="#" alt="" onMouseOver="dispInfo('INTEREST')" onMouseOut="showText()" shape="poly" coords="297, 163, 297, 6, 303, 5, 307, 5, 312, 5, 319, 7, 326, 7, 334, 9, 343, 12, 352, 13, 357, 16, 366, 21, 375, 25, 380, 28, 389, 34, 393, 37, 400, 42, 405, 48, 411, 52, 417, 59, 426, 70, 431, 77, 434, 82, 438, 89, 441, 95, 444, 102, 446, 109, 449, 116, 452, 125, 454, 133, 455, 141, 456, 152, 456, 164, 457, 171, 457, 179, 455, 184, 455, 191">
<area href="#" alt="" onMouseOver="dispInfo('MILITARY')" onMouseOut="showText()" shape="poly" coords="298, 163, 454, 188, 453, 200, 451, 206, 449, 212, 446, 221, 442, 231, 439, 237, 435, 243, 432, 248, 428, 253, 425, 261, 417, 265, 413, 271, 411, 276, 407, 280, 403, 283, 397, 286, 392, 291, 384, 296, 380, 300, 372, 303, 367, 306, 358, 311, 350, 312, 344, 316, 332, 318, 325, 320, 320, 321, 313, 322, 310, 318, 297, 320">
<area href="#" alt="" onMouseOver="dispInfo('HEALTH')" onMouseOut="showText()" shape="poly" coords="299, 164, 300, 320, 296, 322, 292, 322, 286, 322, 281, 321, 274, 320, 263, 317, 254, 315, 243, 311, 235, 308, 228, 304, 219, 300, 213, 296, 207, 292, 200, 288, 195, 283, 189, 278, 183, 272, 178, 266, 173, 260, 168, 254, 165, 249, 161, 243, 160, 242">
<area href="#" alt="" onMouseOver="dispInfo('INCOME')" onMouseOut="showText()" shape="poly" coords="298, 162, 160, 242, 158, 238, 156, 234, 153, 228, 151, 222, 148, 218, 147, 213, 146, 207, 145, 202, 143, 197, 143, 195">
<area href="#" alt="" onMouseOver="dispInfo('VETERANS')" onMouseOut="showText()" shape="poly" coords="298, 163, 143, 194, 142, 192, 141, 187, 141, 184, 140, 181, 105, 206, 105, 221, 17, 222, 17, 189, 105, 190, 105, 205, 141, 179, 140, 173, 139, 166, 139, 162, 139, 157">
<area href="#" alt="" onMouseOver="dispInfo('NUTRITION')" onMouseOut="showText()" shape="poly" coords="297, 163, 140, 157, 140, 148, 105, 150, 105, 168, 106, 171, 46, 171, 46, 137, 105, 137, 105, 151, 139, 147, 141, 137">
<area href="#" alt="" onMouseOver="dispInfo('EDUCATION')" onMouseOut="showText()" shape="poly" coords="297, 165, 141, 138, 141, 133, 142, 128, 144, 123, 105, 114, 105, 128, 46, 128, 46, 97, 104, 97, 104, 112, 143, 122, 144, 119, 147, 112, 148, 109">
<area href="#" alt="" onMouseOver="dispInfo('HOUSING')" onMouseOut="showText()" shape="poly" coords="297, 165, 148, 109, 151, 102, 104, 78, 104, 91, 45, 91, 45, 55, 105, 55, 105, 79, 151, 102, 153, 98, 156, 93">
<area href="#" alt="" onMouseOver="dispInfo('ENVIRONMENT')" onMouseOut="showText()" shape="poly" coords="297, 165, 155, 93, 159, 83, 111, 35, 111, 50, 41, 50, 41, 18, 111, 18, 111, 35, 159, 83, 164, 75">
<area href="#" alt="" onMouseOver="dispInfo('JOB')" onMouseOut="showText()" shape="poly" coords="297, 164, 164, 75, 165, 73, 152, 36, 122, 35, 122, 3, 189, 3, 189, 36, 153, 35, 165, 72, 168, 71">
<area href="#" alt="" onMouseOver="dispInfo('OTHER')" onMouseOut="showText()" shape="poly" coords="297, 162, 167, 71, 173, 65, 178, 60, 181, 55, 188, 50, 193, 44, 198, 39, 208, 33, 222, 25, 233, 18, 243, 15, 254, 12, 265, 9, 277, 7, 285, 5, 295, 5, 297, 5">
</map>
Hope this helps!
PS. Some of your other HTML is also invalid some tags nested incorrectly, and you have a table tag that looks like this
<table width="600"
you need to close this tag eg
<table width="600">
Errors like these will also make NS 4 do strange things!
Oh and some more advice don't use micro$oft products to create your pages!
The solution to the IE6 problem is to get the polygons to have no pixels between them but alos not overlapping....goodluck!
Thanks for your help. It work now.
As for the formatting (wrongly nested tags) - blame Micro$oft. I didn't add even one line of HTML code to that site (except the image map and the <layer> tags around <div> tags. I agree FrontPage isn't the best tool to create websites, but if you want to create them fast I find it pretty useful (I also use Macromedia programs, which I find very good)
Anyway thanks for your help