Web標準技術によるKISSの実装もあります。→HTML5 KISS
CSS2のポジショニングに対応したブラウザ(具体的にはIE 4以降やNN 4以降など)以外では、画像は重ね合わせて表示されません。その場合にはお手数をかけ恐縮ですが
などしてご利用ください:-)。
JavaScriptに対応していないブラウザとかJavaScriptをオフにしている環境の場合、画像をマウスでつかんで移動させることはできません。NN 4ではJavaScriptがオフになるとスタイルシートも自動的にオフになるので、そもそも重ね合わせて表示されません。
画像を動かす方法については
のいずれかであることを想定しています。
マウス入力を受け取る方法については、DOM Level 2 Eventsによる方法は1999年の時点ではMozilla/Netscape 6以外に対応ブラウザがなかったようなので、
のいずれかであることを想定しています。
画像には、本当はPNGを使いたいのですが、NN 4がPNGの透過に対応していなかったり、MacOS版のIEがバージョン4.5までPNGにまったく対応していなかったりするので(5.0で対応)、無圧縮のGIFを使うことでUNISYSの特許を回避していました(2004年6月20日で特許は期限切れになりましたが、そのまま無圧縮GIFを使い続けています)。
Firefox 12 (Win)、Windows Consumer PreviewのInternet Explorer 10の全ドキュメントモード/Internet Explorer 9.0.3 (標準モード及び互換表示)/8/6 SP1/4.01 SP1 (Win)、Google Chrome (Win)、Safari 5.1.5 (Win)、Opera 11.62 (Win)で動作を確認しました。
動作したとかしないとか(に限らず)報告はいつでも歓迎します。掲示板かメールでどうぞ。
DHTMLを使ってオブジェクトをマウスドラッグで動かすという発想はとくに目新しいものではなく、同じようなスクリプトを公開しているサイトもすでにいくつかあります。
form:Collage ソース(MITライセンス)
アニタのきせかえあそび エイミーのきせかえあそび IE専用(Dreamweaverの「レイヤーのドラッグ」機能を使用)
球体関節人形 IE、Chrome、Safari、Operaでは動くがFirefoxでは動作しない
三頭身着せ替え IE以外は服を動かせません。
みなりん堂 みなみ せいさん きせかえシステム"siori" (e4+/N6+)
maid-system (WinIE5.5以降ではAlphaImageLoaderを使って)24bitアルファチャネルPNGに対応しています。フェード効果はなぜかIE専用です。
Catzpaw Pick & Place (pnp) version 1.00 Firefoxでは動作しません。IE、Opera、Safari、Chromeでは動作するようです。
動かすにはIE独自拡張のdocument.allを関数のように呼び出せて、CSSStyleDecalationにIE独自拡張のposLeft/posTopを含んで、IE独自拡張のwindow.eventをサポートして、MouseEventがCSSOM ViewのoffsetX/offsetYをサポートして、CSSのcursorプロパティがIE独自拡張の"hand"をサポートしている必要があります。これらのIE独自拡張はOperaやWebKitも互換性のためにサポートしているようです。もちろんCSSOM ViewをサポートしていないのはFirefoxの問題ですが。
pnpは改変自由なようなので、Firefoxに対応させてみました。pnp.js
e4+/N4を自動判別して動作しますがN7未対応です。MacOS版のIE 4にはバグがあって、このスクリプトを使うとときどきフリーズするそうです。またNetscape 4.xでもバージョンが新しすぎると動作しないこともあるようです。新しいバージョンは画像のドラッグがクリックロック方式になっており、またIE4以降専用です。
モエは連絡すれば自由に使えるスクリプトとして配布されているので、これを利用しているサイトがいくつかあります。
などの特徴があります。ただし2.については、あまりの遊びにくさに耐えかねた私が服が逃げないように改良したスクリプトが一部で出回っているようです。
Dragonというレイヤをドラッグして動かすためのスクリプトが公開されています。e4+/N4を自動判別して動作します。
このサイトの作者はなんとNescapeのOpen Directory Project(W3C DOM対応ブラウザ用のサンプルを公開しているページ)にサンプルを提供しているようですが、Dragonは残念ながらまだDOM対応にはなっていないようです。
Dragonもいくつかのサイトで利用されています。
DreamweaverはMacromedia社のオーサリングツールです。e4+/N4の両方で動くDynamicHTMLのページを簡単に作れるようです。
動作確認ブラウザの追加やリンクの追加は必ずしも更新履歴に含めていません。
WebKitとOperaに対応。これらのブラウザにはwindow.eventオブジェクトが存在するのに、オブジェクトの内容(とくにbuttonプロパティの意味)がW3C DOM準拠でIE互換ではないため問題が起きていた。そこでイベントハンドラの引数にイベントオブジェクトが存在する場合はそちらを優先して使用するように変更。
コード変更後に再確認を行なっていない古いブラウザを動作確認対象から削除。
Netscape 6 正式版で動作を確認。
Netscape 6 PR3で動作を確認。
最新のMozillaでバグが修正されたので対策コードを取り除く。
Netscape 6 PR2でも動くように対策する。この対策はまた別のバグを利用したものだったりする。
Netscape 6 PR2で動かないことを確認。最新(8/22現在)のMozillaでは修正済みなのだが別のバグがあって完全動作しないのでそれに対する対策コードを入れる。
Netscape 6 PR1で動作確認。
IE 5(Mac)ではレイヤのサイズを明示しないとドラッグ時に再描画が正常に行われないので、サイズ指定を追加。というかそれが正しい振る舞いかもしれない。