martin's weblog

さて趣味でプログラミングをしているわけですが最近は専らPHPのそれにかかりきりです（1.4.0がリリース間近ということもあり）。でも，たまにはJavaScriptのスクリプトも書いてみたくなります。　IMGタグにはALT属性がありますが，これは画像の代替テキストの役目を果たします。XHTMLでは必須の項目です。このALT属性なんですが，ホームページ作りに励んでいる方々はお気付きかもしれませんが，インターネットエクスプローラー(IE)とFirefoxでは，挙動が違います。IEでは，画像にALT属性があるとマウスのカーソルを重ねたときに，ツールチップ(バルーンヘルプ)が表示されます。でも，Forefoxでは何も表示されません。これはFirefoxのバグというわけではなくて，単にブラウザ間の実装(解釈)の違いに基づくものです。じゃ，Firefoxでもツールチップを出すにはどうしたらいいかというと，TITLE属性を使うわけです。これなら大丈夫です。ALT属性とTITLE属性とは，その役目が違うわけですが実用上はだぶるとこもあります。で，このTITLE属性ですが，これがまた，IEとFirefoxで微妙に違いが見られます。それは，IEではタイトル属性内の改行が有効で，つまりこの改行が実際のツールチップにも反映されるわけです（図１）。

これは使いようによっては便利な実装なんですが，実はこの挙動はTITLEの「正式な」仕様ではありません。なので，仕様により忠実なFirefoxでは，改行指定は無視されます。それだけでなくて変な文字化けみたいになります（図２）。詳しくは，小人さんへの置き手紙 の「title 属性のツールチップ内で改行 」を参照されて下さい。

---

　前置きが長くなりましたが，このTITLE属性内改行指定をFirefoxでも実現するスクリプトを書いてみました。Firefoxだけを相手にしているので，短いスクリプトで済みます(長くはない･･･)。またMozillaの独自拡張ですが影を半透明にしたりコーナーを丸めたりするCSS指定を使って本物っぽく見せています。

hackFirefoxToolTip = function(){
 var imgs = d.getElementsByTagName('IMG');
 var toolTip = d.createElement('DIV');
 var shadow = d.createElement('DIV');
 document.body.appendChild(shadow);
 document.body.appendChild(toolTip);
 
 with (toolTip.style) {
  position = 'absolute';
  backgroundColor =  'ivory';
  border = '1px solid #333';
  padding = '1px 3px 1px 3px';
  font = '500 11px arial';
  zIndex = 10000;
 }
 
 with (shadow.style) {
  position = 'absolute';
  MozOpacity = 0.3;
  MozBorderRadius = '3px';
  background = '#000';
  zIndex = toolTip.style.zIndex - 1;
 }
 
 for(i=0; i<imgs.length; i++){
  if(imgs[i].getAttribute('title') != null ||
     imgs[i].getAttribute('alt') != null){
   imgs[i].onmouseover=function(e){
    var _title = this.getAttribute('title')!=null ?
        this.getAttribute('title') : this.getAttribute('alt');

    this.setAttribute('title', '');
    
    toolTip.style.left = 20 + d.documentElement.scrollLeft + e.clientX + 'px';
    toolTip.style.top = 10 + d.documentElement.scrollTop + e.clientY + 'px';
    toolTip.innerHTML = _title.replace(/\r\n/g,'<br />').replace(/\s/g,' ');
    
    with (shadow.style){
     width = toolTip.offsetWidth -2 + 'px';
     height = toolTip.offsetHeight -2 + 'px';
     left = parseInt(toolTip.style.left) + 5 + 'px';
     top = parseInt(toolTip.style.top) + 5 + 'px';
    }
   }
   imgs[i].onmouseout=function(){
    this.setAttribute('title', toolTip.innerHTML.replace(/<br \/>/g,'&#13;&#10;').replace(/&nbsp;/g,' '));
    toolTip.style.top = '-1000px';
    shadow.style.top = '-1000px';
    toolTip.innerHTML = '';
   }
  }
 }
}

window.onload = function(){
 if(window.sidebar) hackFirefoxToolTip();
}

　なんで，これをしたかったかというと，「画像ギャラリー 」でのツールチップには是非とも改行を反映させたかったからです。改行が利いてくれた方が見やすいですからね（ちょいお洒落でしょ;-)）。　このスクリプトを適用させた場合のFirefoxでのスクリーンショットを最後に載せておきます(図３)。尚，本物のツールチップと違って暫く経ってもツールチップが消えることはありません。Firefoxをお持ちの方はお試しあれ。画像ギャラリーで試せます。

---