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

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


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

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

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

IE(Windows)の場合。

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


こんな感じ。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();
}


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




サンプルはこちら。

代替テキストサンプル

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

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

スポンサーリンク

スポンサーリンク