Going My Way

表示されている画像をドラッグする仕組み

なんか画像が変です。上のスクリーンショットをクリックしたページでは画像が好きなように動かせてしまいます。どうしたらこんな風になってしまうでしょうか？

種明かしをするとDHTMLというもの使って設定をすると画像などを動かせてしまいます。

この方法はSitePoint Blogsで紹介されていたJavaScript: DHTML Library, Drag & Drop for Images and Layersを見て設定しました。このサイトでは表示されている画像がドラッグできるほか大きさを変えたりなどいろいろ面白い動きをします。

この機能を設定する方法は

1.ドラッグ可能な画像などにname="photo1"というように割り当てる

2.bodyタグあとに
<script type="text/javascript" src="wz_dragdrop.js"></script>
というものを追加します。
またbodyタグを閉じる直前に以下のコードを記入します。この中で先ほど割り当てたIDを指定しておく必要があります。

<script type="text/javascript">
<!--

SET_DHTML("photo1", "photo2", "photo3", "photo4");

//-->
</script>

3.wz_dragdrop.jsを保存し解凍後サーバーにアップロードします。

この方法を使うことで画像をドラッグしていくことができます。上のスクリーンショットをクリックするとGoinig My Wayの画像を全部動かせる特別バーションになっています。

Posted by kengo at April 1, 2004 05:53 PM | TrackBack | INTERNET | Blog Search | English | QR | |