忍者ブログ
最新コメント
[09/12 Rio]
[06/26 Kimagureman!]
[05/26 YUKI]
[17] [16] [15] [14] [13] [12] [11] [10] [9] [8] [7]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

TurnScopeの管理人のYUKIです。
 
ガチャ萌え.com様にならって、マウス操作による画像の切り替えを組み込んでみました。
ホイールの回転とマウスの左右ドラッグで画像が切り替わります。
(下記のリンク先のみ実装)

リュウナでの実装テスト(ドラッグを他ページに実装したのでこちらのページは凍結します。)

ホイールは比較的簡単だったのですが、マウスドラッグでちょっととまどいました。
と言うのも、imgタグで表示された画像のデフォルトのドラッグ動作が邪魔をして、onmousemove処理が途中でキャンセルされてしまい、連続的な移動量の算出が出来なくなってしまう為です。
このため、画像の表示方法を"img src=*"から"div style="background-image=url(*)"に変更して、デフォルトアクションのないダグを使って実現しています。
結果、imgのalt属性が使えない点や、divの領域サイズをきちんと設定する必要があるなど、困った点も・・。
imgのデフォルトのドラッグ動作をキャンセル出来ればよいのですが、今のところ方法がわかりません。
 
実装はしてみたものの、ホイールアクションに関しては、ガチャ萌え.com様のように、明示的に回転ページを開いた後ならともかく、通常ページでユーザー動作(スクロール処理)をフックして変更するのは好みじゃないので、封印かも。
サイト全体かページ単位で、ホイール回転による画像変更の有効、無効設定を作ったら有りかなぁ・・。
(あるいは、画像を一度クリックすると有効になる等)  
また、本実装には、テンプレートとページ生成エンジンの変更も必要なので、既存ページに組み込むのはもうしばらくかかります。
 
最後なりましたが、チェックは、WinXP + IE6のみなので、他の環境ではエラーが出るかもしれません。(汗)
もし、不具合などあれば、教えて下さい。

PR

コメント一覧

コメント投稿

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字

トラックバック一覧

トラックバックURL

この記事にトラックバックする:
忍者ブログ [PR]