Results 1 to 7 of 7

Thread: onmouseover() and image map

  1. #1
    VBSpike
    Guest

    onmouseover() and image map

    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

  2. #2
    The Devil crptcblade's Avatar
    Join Date
    Aug 2000
    Location
    Quetzalshacatenango
    Posts
    9,091
    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.

    Laugh, and the world laughs with you. Cry, and you just water down your vodka.


    Take credit, not responsibility

  3. #3
    VBSpike
    Guest
    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

  4. #4
    Hyperactive Member progressive's Avatar
    Join Date
    Sep 2001
    Location
    Manchester, UK
    Posts
    404
    can we have a look at your code, because I'm sure I've done an onmouseover event on an image map before!

  5. #5
    VBSpike
    Guest
    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

  6. #6
    Hyperactive Member progressive's Avatar
    Join Date
    Sep 2001
    Location
    Manchester, UK
    Posts
    404
    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!

    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>
    That one was hard to spot especially when IE and NS6 didn't have a problem with it!

    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!
    Last edited by progressive; Oct 17th, 2001 at 04:08 AM.

  7. #7
    VBSpike
    Guest
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width