Kawa.netxp
[YUI] マウスオーバーでリンク先サムネイル表示
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="//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>
トラックバックURL：http://www.kawa.net/service/tb/ajaxtb.cgi/works/js/tips/yui-tooltips.html