Problem (and a fix) Re: Using the 'title' attribute and IE

[iscotony]

Pretty swanky script. Nice and clean. The biggest issue we've run into though is when we try to use this on an image map on IE. IE displays 'title' attribute information in a yellow tooltip - which isn't terrible in most cases but here it displays the enitre Code of the boxover in the hover box.

The solution is pretty simple: Don't use the 'title' attribute at all:

I went through the HTML page and changed references from 'title="..."' to 'hoverbox="...."', and then went into the boxover code and made the following changes:

function scanBO(curNode) {
  var btext = curNode.getAttribute('hoverbox');
  if (checkElemBO(btext)) {
    curNode.boHDR=getParam('header',btext);
    curNode.boBDY=getParam('body',btext);
    curNode.boCSSBDY=getParam('cssbody',btext);      
    curNode.boCSSHDR=getParam('cssheader',btext);
    curNode.IEbugfix=(getParam('hideselects',btext)=='on')?true:false;
    curNode.fixX=parseInt(getParam('fixedrelx',btext));
    curNode.fixY=parseInt(getParam('fixedrely',btext));
    curNode.absX=parseInt(getParam('fixedabsx',btext));
    curNode.absY=parseInt(getParam('fixedabsy',btext));
    curNode.offY=(getParam('offsety',btext)!='')?parseInt(getParam('offsety',btext)):10;
    curNode.offX=(getParam('offsetx',btext)!='')?parseInt(getParam('offsetx',btext)):10;
    curNode.fade=(getParam('fade',btext)=='on')?true:false;
    curNode.fadespeed=(getParam('fadespeed',btext)!='')?getParam('fadespeed',btext):0.04;
    curNode.delay=(getParam('delay',btext)!='')?parseInt(getParam('delay',btext)):0;
    if (getParam('requireclick',btext)=='on') {
      curNode.requireclick=true;
      document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
      document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
    }
    else {// Note : if requireclick is on the stop clicks are ignored         
      if (getParam('doubleclickstop',btext)!='off') {
        document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
      }  
      if (getParam('singleclickstop',btext)=='on') {
        document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
      }
    }
    curNode.windowLock=getParam('windowlock',btext).toLowerCase()=='off'?false:true;
    btext='';
    curNode.hasbox=1;
   }
   else
      curNode.hasbox=2;
}

Basically just the first line there grabbing from the attribute, then replace 'curNode.title' with 'btext'. Boom. Done.

Tested on: Firefox (Win/*Nix), Safari, IE 6. Would like a test on IE 5 Win, but I'm not going to lose any sleep over it.

[olly]

When initially designing BoxOver I was using a custom attribute like you have used but it wouldn't work in Opera which is why I went with the title attribute in the end.

Opera is a pretty bad browser anyway as far as I'm concerned but I thought a few people out there might use it...

[squall1385]

Can you send the working files for this? I thried it but it's not working. I'm just a beginner in javascript and I think that yellow boxover really needs to disappear too. Please send working files... please... please... please... here is my e-mail - squall1385@yahoo.com... THANKS ALOT!

[blizeH]

Did anyone manage to find a work around to this in the end? I've tried using that code mentioned in the first post but it's not displaying anything at all now for some reason

Cheers

[blizeH]

For anyone else reading this; his solution actually works perfectly, it just hasn't displayed properly in the code box. View source and copy from there

[jerone]

a suggestion;
maybe it would be handy to make the used tag easly editable. make a var at the beginning of the script with the tag you want to use. normaly it would be the 'title'-tag, and the 'boxover'-tag in this case above.

[gvanvoor]

I'm encountering the "yellow title" bug in opera (version 9.21 on OS X), but I'd rather not use the boxover attribute because this will prevent my code from validating. So I was wondering if there's a way to adapt the code to function with mouseover/mouseout events? (sadly enough I don't know enough about javascript to do it myself).
A part from this small problem, it's working perfectly. Thanks and congratulations to all those involved.

[tupm]

netphone is very good

[randyschreiber]

Has anyone tested this fix in IE 7? I updated the script on my site accordingly, and couldn't get it working...

[randyschreiber]

scratch that...fixed by placing <script> in the header (where it should be)