Results 1 to 6 of 6

Thread: onMouseOver not working in AREA tag

  1. #1
    Join Date
    Jun 2005
    Location
    Scotland
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onMouseOver not working in AREA tag

    I've stared at this till I'm crossed-eyed and still cannot work it out. I have an image map where I'm using a number of AREA tags to provide links to various pages. I've inserted code as part of the tag to change the text in the statusbar of which the following example is typical:

    onMouseOver="window.status='Review database services'; return true;" onMouseOut="window.status=''; return true;"

    (Note that it's two ' marks after the status for the onMouseOut statement)

    The onMouseOver doesn't work. Instead it displays the link destination URL.

    Interestingly, the onMouseOut does work, having checked it by puting text inbetween the 's.

    I cannot for the life of me see what's wrong. Help!

    Cheers

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Well, obviously it is not the code in your post that is in error. Image maps can be funny. Is there someplace (a demo page) we can look to see this phenomenon you are describing?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Location
    Scotland
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    I've posted my website in draft form. You'll find it at http://alistairhamilton.homecall.co.uk

    The problem lies on the main graphic on the first page. The following hotspots on the image all exhibit the same behaviour: 'Databases', 'Web Design', 'Networking', 'Support' and 'Training'

    Substituting NOHREF for any of the HREF link declarations within an AREA tag allows the onMouseOver statement to do it's thing.

    Cheers

    Alistair

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Appears to be a 'feature' of IE only, fixing it for IE while not messing up Mozilla will be a challenge. I came up with:
    Code:
            <a href="http://alistairhamilton.homecall.co.uk/databases.html"><area NOHREF onClick="location.href='http://alistairhamilton.homecall.co.uk/databases.html';return false;" onMouseOver="this.parentElement.parentElement.parentElement.style.cursor='pointer';window.status='Review database services'; return true;" onMouseOut="this.parentElement.parentElement.parentElement.style.cursor='';window.status=''; return true;" shape="rect" alt=
            "Database Services: Bespoke Access solutions with integration to other MS Office products or the Internet. Fully designed and tested to your specifications. Please call to discuss."
                  coords='72, 120, 167, 145'></a>
    A long way to go and still the cursor will not change onmouseover in Mozilla. Not even using 'document.documentElement.', hover class for area, or three 'parentNode.' instead of the three 'parentElement.' will change the cursor in Mozilla but, at least 'document.documentElement.' gives no error in Mozilla and still works in IE6 with your doctype. Errors of this type in Mozilla are less of a problem than in IE6, so I'd stick with the above code for backward compatibility with earlier IE's. Other than the cursor not changing onmouseover in Mozilla, works fine in both browsers but, as I said before, worked fine in Mozilla to begin with. If you want it perfect, I am afraid you may have to use conditional document.write statements to create two different maps.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Location
    Scotland
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Good old IE eh - don't you just love it? Nothing like a long way round for a short cut . This is the first time I've ever used an image map. Typical!

    Thanks for your efforts John. Much appreciated.

    Alistair

  6. #6
    Join Date
    Sep 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I ran into this issue too.
    What can I say? It's IE!

    anyways...I did however find a way to get it to work in IE.
    instead of assigning the value to window.status directly, we let settimeout do the dirty work (it's not that the onMouseover event doesn't work.....just setting the window.status in an onMouseover in an AREA tag).
    And in the onMouseover, replace "window.status" with the function name or u can enter the setTimeout call there.

    HTML Code:
    <script language="javascript">
    function setStatus(text)
    {
      setTimeout("window.status = \'" + text + "\';", 0);
      
      return true;
    }
    </script>
    So,
    HTML Code:
    onMouseOver="window.status='hello World!'; return true;"
    Becomes
    HTML Code:
    onMouseOver="return setStatus('hello World!');"
    And it works fine in Firefox and in IE.

Bookmarks

Posting Permissions

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