画像をマウスオーバーしたときに表示されるテキストを改行する

画像に代替テキスト（altまたはtitle）を設定していると、
マウスオーバーしたときにそのテキストがポップアップして表示されます。

コレを改行させたいと思って色々調べてみたのでそのまとめ。

1. IEだけまともに見えればいいやって言う場合。

IEはalt属性内での改行に対応しているようなので、次の手順で改行を実装できます。

IE（Windows）の場合。

こんな感じ。IEでは改行されて見えます。

教祖とダースベーダー卿夢の競演<br />
怖すぎる…

また似たような手段として、改行を表すコード（）を挿入する方法もあります。

これも、上と同じ効果になります。

ただWebデザインをする上ではIEだけOKなら良いわけでもなく、
そもそもこの挙動はWEBの仕様に反しているので、
Firefoxでは正しく表示されません。
ただ、空白があいた感じになってしまいます。

というわけで。

2. Firefoxでもきちんと改行されるようにする。

参考にしたのはこちら。

FirefoxでTITLE属性のツールチップ内改行を有効にしたい

ここで紹介されているJavaScriptを使用することで、
改行を表すコード（）を挿入したときのFirefoxの挙動が、
IEのものに近くなります。

紹介されているコードは若干不備（依存？）があるので2行目に以下を挿入してやります。

var d = document;

さらにこのままだと画像が表示された時点で、
四角い枠の画像（後にポップアップされる領域）が表示されてしまうので、
toolTip.styleの初期位置に以下を追加します。

top = '-1000px';

また、僕はドロップシャドウは要らないので、その部分をカット。

以上の改変を行ったスクリプトがこちら。

hackFirefoxToolTip = function(){
var d = document;
var imgs = d.getElementsByTagName('IMG');
var toolTip = d.createElement('DIV');
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;
top = '-1000px';
}

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,'').replace(/\s/g,' ');
}
imgs[i].onmouseout=function(){
this.setAttribute('title', toolTip.innerHTML.replace(//g,'&;#13;
').replace(/ /g,' '));
toolTip.style.top = '-1000px';
toolTip.innerHTML = '';
}
}
}
}

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

コレを導入するとこんな感じ。