けとけと。の自由帳

サイド自由欄

動画ページ
HOT!まいろ

< 新しい記事

新着記事一覧(全5592件)

過去の記事 >

2003年09月05日

ストーカー応用を考える人に・ぃょぃょ

(28)

テーマ：ＨＴＭＬを使って楽天で何ができるのか．(160)

カテゴリ：未整理

昨日の日記にも書いたように画像がついて来るだけがマウスストーカーではありません．

他の使い方もできるように少し細かい解説を入れて見ましょう．

何をついてこらせるかを記述します．

スクロールさせたいものならMARQUEEタグ，色のついた文字ならFONTタグって感じに．ごく普通にタグを記述します．

．．．言い方を変えればページに表示できる内容なら何でもマウスについてくるように設定できるって事かな（＾＾；

で，その記述したタグに

ID="ID名" style="position:absolute"

を付け加える．

表示するものに幅や高さを指定したい場合は

ID="ID名" style="position:absolute;width:幅;height:高さ;"

って感じにスタイルシートの設定を付け加えてください．

やれる事１つ１つ説明していたら膨大なバリエーションを説明しなくちゃいけなくなるので（＾＾；
料理で調味料の全組み合わせの説明とか大変ですものね．

それとマウスを動かしたときに上で記述したタグだけを動かしたいのでちゃんとID名．
固有の名前を忘れないでくださいね．

ちゃんと名前で呼ばないと言う事聞いてくれませんからね(笑)

で次にマウスを動かしたらついてくるようにする部分の説明です．

ここの表示が見える範囲だけでマウスがついてくる．
</タグ>

このようにマウスを動かすとついて来る領域を設定します．

これに下記の設定をタグの中に記述します．

onmousemove =XX=body.scrollLeft+event.x;ID名.style.left=XX;YY=body.scrollTop+event.y;ID名.style.top=YY;

onmousemove
　　マウスを動かしたときに処理を実行させるというイベントです．

XX=body.scrollLeft+event.x;
XX という変数という数値を保存しておく箱の名前．
body.scrollLeft+event.x; で計算したマウスの現在位置（これは横の位置）を上の箱の中に保存．
　　縦の位置は YY の部分を参照．

ID名.style.left=XX;

　これは左の座標にマウスの座標を設定している．
　上の座標は ID名.style.top の部分を参照．

っと，ココまで文章で書いてみましたが中にはイメージしにくい人もいると思いますので，図を入れてみましょう．

図１

ココって書いているマウスの先が body.scrollLeft+event.x; ， body.scrollTop+event.y; で取得できるマウスの位置．
通常，横の方向をXと考え，位置をX座標．縦の方向をYと考え，位置をY座標と呼ぶ．

次に

図２

で，マウスにつけたいタグの表示エリア左上（ココって書いてる位置）の座標を，図１のマウスのココって書いてる位置に合わせるのが ID名.style.left=XX; と ID名.style.top=YY; である．

一度，マウスとくっつけたい表示をどうしたいのかを紙に書いて，位置の計算をしてみるといいかもしれない．
苦手な人もいるかもしれないけど，結構こういう計算がHPには必要なので慣れていった方がいいでしょう．

おまけ：下の文字にマウスを持っていってみて

すくろ～る
MARQUEEタグと表示位置をマウスより左に設定
コメント表示(笑)
枠を描いてコメントを表示

さて，明日６日は「エトーマート＠楽天広場」開設２周年っす！

もう丸２年ですかぁ～．．．．
いろいろ楽天でやったなぁ～

お気に入りの記事を「いいね！」で応援しよう