Monday, 11 October 2010

Suppression of IE Tooltips on an imagemap area

So I was messing around with image-maps so that I could get a visualisation to work properly on Internet Explorer... Except the tooltips which the browser threw up interfered with my own tooltips!

There seems to be masses of debate about whether or not it's a good idea to show the alt text for an image as a tooltip and the way around it generally is to have an empty title attribute suppress the alt text tooltip in Internet Explorer... except that that doesn't work in the context of image-maps...

Now I was looking into this as I was using javascript to generate a tooltip so I had to add event listeners (don't get me started on how that's a pain in the arse for Internet Explorer).

So within my code for the event handlers I simply used javascript to create a name attribute for the area and then populate that attribute with the alt text before clearing the alt text for the onmouseover event. For the onmouseout event I nigh on reversed it by adding the name text to the alt attribute before removing the name attribute.

Simple ehh?

This is the code, truncated to show what I mean:

onmouseover

function doSomething(event){
  // ...loads of code here...
  if(!document.addEventListener){
    event.srcElement.setAttribute("name", event.srcElement.alt);
    event.srcElement.setAttribute("alt", "");
  }
}

onmouseout

function doSomethingElse(event){
  // ...only a little bit of code here...
  if(!document.addEventListener){
    event.srcElement.setAttribute("alt", event.srcElement.name);
    event.srcElement.removeAttribute("name");
  }
}