画像の代替テキスト（img要素のalt属性）をツールチップで表示できるようにするgreasemonkeyユーザスクリプト
IEでは、画像の上にマウスカーソルをのせると、その代替テキストがツールチップで表示されます。しかし、Firefoxなどのブラウザでは表示されません。
この振る舞いはHTML 4.01の仕様どおりですが、IEのようにツールチップで表示したい*1人もいると思います…ハイ、私がそうです。
そんな人は "Popup ALT Attributes" のような拡張機能を使うといいです。
しかし! 私の環境ではPopup ALT Attributesがちゃんと動作してくれないのです。ほかの拡張機能が影響しているのかもしれませんが、めんどくさいので原因は調べてません。
仕方ないので、別の方法を考えてみました。
Firefoxなどではalt属性をツールチップで表示しませんが、title属性は表示してくれます。よって、alt属性の値をtitle属性の値にコピーしてあげれば表示できそうです。これをgreasemonkeyユーザスクリプトで書こうと思います。
ツールチップの内容は次のようにして決めます。
title属性値 |
alt属性値 |
src属性値 |
ツールチップ |
|---|---|---|---|
| なし | なし | なし | （しない） |
| あり | src属性から取得したファイル名 |
||
| あり | なし | alt属性値 |
|
| あり | |||
| あり | なし | なし | title属性値 |
| あり | |||
| あり | なし | ||
| あり |
greasemonkeyユーザスクリプトはこうなりました*2。
// ==UserScript==
// @name Popup Alt
// @namespace http://d.hatena.ne.jp/mitamu/
// @description Popups alternate text.
// ==/UserScript==
(function() {
for (var i = 0; i < document.images.length; i++) {
var e = document.images[i];
// title 属性値 (= ツールチップ) の設定
if (!e.title) {
if (e.alt) {
e.title = e.alt;
} else if (e.src) {
var p = (e.src.lastIndexOf('/') + 1) % e.src.length;
e.title = e.src.substring(p);
}
}
// ついでに alt 属性値も設定しておく
if (!e.alt && e.title) {
e.alt = e.title;
}
}
})();これで拡張機能を1つ減らせます*3。Greasemonkeyはすごいですね〜。
