Alt属性で(ツールチップ)ポップアップ
2011/12/07(水) 13:06 はてブ情報 はてブに登録 はてブ数

livedoorブログでは写真のサムネイルにマウスを乗せていると、画像のファイル名がツールチップ(ポップアップ)していた。
画像のファイル名を撮影時間やコメントにしておけば便利だった。
しかし、だいぶ前からツールチップがでなくなった。livedoorのせい?と調べたら原因は↓

img要素でalt属性の内容がポップアップしない
http://www.mozilla.gr.jp/standards/webtips0024.html
とだいぶ前からのブラウザはAlt属性でポップアップしなくなったらしい。
しらなかった。

じゃ、livedoorブログで自分でtitle属性を手書きで追加すればいいんでしょうが、当然面倒です。
なので、ALT属性でツールチップするjavascriptを探したがないので、苦労して自分で変更してみた。

ツールチップするjavascriptを探したたらGood Looking Tooltips がよさげ
http://www.robertnyman.com/glt/
javascriptライブラリを使用しないscriptで他に比べてお手軽なtooltipでした。

これをALT対応に変更したものは
http://www.geocities.jp/ina_yama/glt-alt.js
このファイルをダウンロード保存してもらい、
http://www.robertnyman.com/glt/images/rounded-top.gif
http://www.robertnyman.com/glt/images/rounded-bottom.gif
から rounded-top.gif、rounded-bottom.gif もダウンロード。
この3つのファイルを、自分のどこかのサイトに置いておく。
(アクセスの少ないところなら http://www.geocities.jp/ina_yama/glt-alt.js そのまま使ってもいいですが)

glt-alt.jsの9、10行目にあるイメージパスを以下のように2つの画像のパスに合わせます。
var GLT = {
	// Customization parameters
	altClassName : "glt-elm",	
	topImagePath : "rounded-top.gifのあるURL",
	bottomImagePath : "rounded-bottom.gifのあるURL",
livedoorのほうは、"デザインのカスタマイズ" の "個別記事ページ" のタグから
<script type="text/javascript" src="glt-alt.jsのあるURL" charset="euc-jp">
</script>
を /head タグの前においておく

"デザインのカスタマイズ" の " CSS" は以下を追加
.glt-elm{
	position: absolute;
	left: 0;
	top: 0;
	width: 150px;
	color: #fff;
	opacity: 0.9;
	visibility: hidden;
}

.glt-elm p{
	background: #666;
	margin: 0;
	padding: 0.5em;
}

.glt-elm img{
	display: block;
}

.glt-elm{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}	

そしたら、最近、livedoorブログでimg要素のtitle属性がファイル名になったらしい。
livedoorブログからのアナウンスは不明ですが、最近投稿したものはツールチップが2重になってしまった。
http://blog.livedoor.jp/ina_yamanakama/archives/51904023.html
しらなかった。(こればっかですが)
悔しいので、、ALT属性でツールチップするjavascriptの内容を後世に伝えたい。
(以前投稿した内容はALT属性のままなので、そのまま残しますが)

名前:  非公開コメント   

E-Mail(任意/非公開):
URL(任意):
  • TB-URL  http://www.cirlution.com/blog/adiary.cgi/09/tb/