English Japanese Kawa.netxp [YUI] マウスオーバーでリンク先サムネイル表示

Yahoo! UI Library の YAHOO.widget.Tooltip オブジェクトのツールチップ機能と、 Simple API のサムネイル画像取得サービスを組み合わせて、 マウスオーバーでリンク先サイトのサムネイル表示を行うデモです。

上記リンク部分にマウスカーソルを乗せると、サムネイルを表示します。

ソースコード

短いです。YUI と SimpleAPI に感謝!

<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 += '<br>'+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>

更新履歴

2006/06/24
作ってみた。

コメントはこちらへ by AjaxCom

トラックバックURL:http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/tips/yui-tooltips.html

その他のページへのリンク

Kawa.netxp © Copyright 2006 Yusuke Kawasaki