Alt属性で(ツールチップ)ポップアップ
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つの画像のパスに合わせます。
"デザインのカスタマイズ" の " CSS" は以下を追加
そしたら、最近、livedoorブログでimg要素のtitle属性がファイル名になったらしい。
livedoorブログからのアナウンスは不明ですが、最近投稿したものはツールチップが2重になってしまった。
http://blog.livedoor.jp/ina_yamanakama/archives/51904023.html
しらなかった。(こればっかですが)
悔しいので、、ALT属性でツールチップするjavascriptの内容を後世に伝えたい。
(以前投稿した内容はALT属性のままなので、そのまま残しますが)
画像のファイル名を撮影時間やコメントにしておけば便利だった。
しかし、だいぶ前からツールチップがでなくなった。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属性のままなので、そのまま残しますが)
コメント(0件)
- TB-URL http://www.cirlution.com/blog/adiary.cgi/09/tb/
