前の記事 ≪:約21,500軒の宿泊施設情報が取得可能な楽天トラベルAPI
次の記事 ≫:WEBデザインの際に使える50のソース

画像カーソル位置をズームインできるライブラリ「tjpzoom.js」

2007年03月08日-はてなブックマーク

スポンサード リンク
valid.tjp.hu - tjpzoom.js 2.0 - JavaScript / CSS / DOM image magnifier
As you may have realized, this is a tool that brings images closer. This is the new version of my script, tjpzoom.

画像カーソル位置をズームインできるライブラリ「tjpzoom.js」。
次のように、カーソル位置の画像をズームできます。
知っておけば、ウォーリーを探せ風の簡単なゲームを作ったり、サイトのキャンペーンとしての面白い1要素として使えそう。



設置方法は簡単で、まず、次のようにスクリプトを読み込みます。

<script type="text/javascript" src="http://valid.tjp.hu/zoom2/tjpzoom.js"></script>

後は、次のように、DIV要素の、onmouseover, onmousemove, onmouseout イベントにライブラリ提供関数を渡すだけ。

<div style="float:left" onmouseover="zoom_on(event,SMALL pic width,SMALL pic height,'SMALL pic url', 'BIG pic url');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="SMALL pic url" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>

頻繁に使うものではありませんが、知っておくとふとしたときに使えるでしょう。

関連の記事検索:JavaScript, ライブラリ, Ajax, Webデザイン, image
スポンサード リンク

By.KJ : 2007年03月08日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)