- ベストアンサー
マウスオーバーでリンク先サムネイル表示
http://www.kawa.net/works/js/tips/yui-tooltips.html 上のURLのサイトに書いてある「マウスオーバーでリンク先サムネイル表示 」を実際に使いたいのですが 、ソースを"どこに"どのように変更"して入れるのかが、いまいちわかりません。具体的に教えてください。 また、もっと簡単なものがあれば教えていただけると幸いです。 よろしくお願いいたします。
- waterfox_sk
- お礼率30% (7/23)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご提示のサイトの「マウスオーバーでリンク先サムネイル表示 」 は 「Simple API」 さんのサブネール生成のAPIサービス↓ http://img.simpleapi.net/ で動的に生成したサブネール画像を「YUI」のライブラリーのツールチップ機能 を使って表示させるって仕組みですね。 ご提示サイトのjavascriptサンプルそのまんまでよいはずですけど．．． もしかして、 var list = document.getElementById('links').getElementsByTagName('a'); の意味が解らないのですか？ つまり、id属性に 'links' がセットされた要素内にある<a>をリストの対照にするって 意味ですけど。 フルHTMLでサンプル書くと↓となりますね (行頭の全角空白は半角空白にですよ） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Sample</title> <script type="text/javascript" src="js/yahoo.js"></script> <script type="text/javascript" src="js/event.js"></script> <script type="text/javascript" src="js/dom.js"></script> <script type="text/javascript" src="js/container.js"></script> <style type="text/css"> .tt { position: absolute; padding: 4px; color: #333333; background-color: #DDEEFF; border:1px solid #66CCFF; width: 320px; font-size: 13px; } </style> <script type="text/javascript"> function init() { var list = document.getElementById('links').getElementsByTagName('a'); for( var i=0; i<list.length; i++ ) { var el = 'tooltip'+i; var url = list[i].href; if ( ! url.match( /^https?:/ )) continue; var title = '<img src="http://img.simpleapi.net/small/'+url+'">'; if ( list[i].title ) title += list[i].title; var tp = new YAHOO.widget.Tooltip( el, { context:list[i], text: title, autodismissdelay: 5000 } ); } } YAHOO.util.Event.addListener(window, "load", init); </script> </head> <body> <ul id="links"> <li><a target="_blank" href="http://www.yahoo.co.jp/" title="2006年4月1日、Yahoo! JAPANはサービス開始から10周年を迎えました。">Yahoo! JAPAN</a></li> <li><a target="_blank" href="http://pc.watch.impress.co.jp/" title="PCに関する総合情報">PC Watch</a></li> <li><a target="_blank" href="http://www.asahi.com/" title="asahi.com:朝日新聞の速報ニュースサイト">asahi.com</a></li> </ul> </body> </html>
