マウスオーバーでリンク先サムネイル表示

解決済

質問者：waterfox_sk
質問日時：2011/03/01 22:04
回答数：1件

http://www.kawa.net/works/js/tips/yui-tooltips.h …
上のURLのサイトに書いてある「マウスオーバーでリンク先サムネイル表示」を実際に使いたいのですが、ソースを"どこに"どのように変更"して入れるのかが、いまいちわかりません。具体的に教えてください。
また、もっと簡単なものがあれば教えていただけると幸いです。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2011/03/02 19:45

ご提示のサイトの「マウスオーバーでリンク先サムネイル表示」

は「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>