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



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

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

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

IE(Windows)の場合。

<img src="/assets/2008/12/07_03_sample.jpg" alt="教祖とダースベーダー卿夢の競演
怖すぎる…" title="教祖とダースベーダー卿夢の競演
怖すぎる…" />


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

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

また似たような手段として、改行を表すコード(&#13;&#10;)を挿入する方法もあります。

<img src="/assets/2008/12/07_03_sample.jpg" alt="教祖とダースベーダー卿夢の競演&#13;&#10;怖すぎる…" title="教祖とダースベーダー卿夢の競演&#13;&#10;怖すぎる…" />

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



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



というわけで。



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

参考にしたのはこちら。

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

ここで紹介されているJavaScriptを使用することで、
改行を表すコード(&#13;&#10;)を挿入したときの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,'<br />').replace(/\s/g,' ');
   }
   imgs[i].onmouseout=function(){
    this.setAttribute('title', toolTip.innerHTML.replace(/<br \/>/g,'&;#13;
').replace(/ /g,' '));
    toolTip.style.top = '-1000px';
    toolTip.innerHTML = '';
   }
  }
 }
}

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


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





サンプルはこちら。

代替テキストサンプル

Firefoxでマウスオーバーしたときの挙動が若干過敏ですが、
表現としては十分良い感じですね。

画像のalt属性を生かせるという点でもSEO的に見て便利だなと思います。