2003年09月05日
カテゴリ： 未整理
昨日の日記にも書いたように画像がついて来るだけがマウスストーカーではありません．
他の使い方もできるように少し細かい解説を入れて見ましょう．
何をついてこらせるかを記述します．
スクロールさせたいものなら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タグと表示位置をマウスより左に設定
コメント表示(笑)
枠を描いてコメントを表示
さて，明日６日は「エトーマート＠楽天広場」開設２周年っす！
もう丸２年ですかぁ～．．．．
いろいろ楽天でやったなぁ～
他の使い方もできるように少し細かい解説を入れて見ましょう．
何をついてこらせるかを記述します．
スクロールさせたいものなら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タグと表示位置をマウスより左に設定
コメント表示(笑)
枠を描いてコメントを表示
さて，明日６日は「エトーマート＠楽天広場」開設２周年っす！
もう丸２年ですかぁ～．．．．
いろいろ楽天でやったなぁ～
お気に入りの記事を「いいね！」で応援しよう
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
ηёηё★彡
さん
ﾋｲｨｨｨｨｨｨｨｨｨｨｨｨｨｨｨｨ!!!!(ﾟﾛﾟﾉ)ﾉ<br>ひとまず読んだ・・・しかし・・・<br><br>ヽ(τωヽ)ﾉ ﾓｳﾀﾞﾒﾎﾟギブアップざんす～<br>頭が動かないって言うか<br>頭の中がグツグツ煮えたちそうヽ(；▽；)ノｱﾊﾊ<br>脳みそ隙間だらけなのに<br>入る量が少なくて( θ_Jθ)ｺﾏｯﾀﾓﾝﾀﾞ<br>♪☆キャハハ o(≧▽≦o)o(≧▽≦)o(o≧▽≦)o キャハハ☆♪<br><br>w(^_^)ンーナニナニ？笑い事じゃない？<br>(。--)ノ ハーイ<br>λλλλλλ............トボトボ
(2003年09月05日 13時31分09秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
NONAママ
さん
こんにちは♪<br>何度も何度も読んだのですがやっぱり難しいです(*^-^*) <br>いつもこんなに親切に説明や画像や見本があるのに<br>すぐに出来ない頭の硬い私ですがｐ(*^-^*)ｑます♪<br>足跡ペタペタ お許し下さい(〃∇〃)
(2003年09月05日 13時43分03秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
あ～ちゃん☆〃
さん
！Σ(￣□￣;)(￣▽￣;A<br>むずかしそう～。。<br>でもチャレンジだーいすき（＾ｕ＾）プププ☆<br>明日で２周年なんですかあ～(゜ｏ゜;) ﾄﾞｷﾄﾞｷ...<br>おめでと～( ^０^)／Ｕ☆Ｕ＼（＾￢＾ ）☆<br>私のHPももうすぐ（＾ｕ＾）プププ☆２万！
(2003年09月05日 13時45分22秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
シュガリー☆
さん
数学のx軸、y軸みたいですね(^_^;)<br>少し勉強していきますので・・・<br>／( ＿ｖ＿)￣θ オーバーヘッド足跡残し～!!<br><br>明日は２周年記念日ですか！<br>少し早いけどおめでとうございます。<br>ずいぶん、長く続けていますよね。<br><br>ところで、今日は、開設７３０日目では？<br>
(2003年09月05日 14時02分13秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
ワンダーゆうき
さん
ご無沙汰している内に明日は2周年ですねぇ～<br>益々目が･ﾟ･(ﾉД`)･ﾟ･･ﾟ<br>ついていけるのだろうか・・(^^;ゞ<br>内容の濃い日記を再度見直さないと・・
(2003年09月05日 14時51分01秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
アビ
さん
たまには頭を休めようと思った矢先・・・<br>またパニック状態です。<br><br>新しい事について行けない私って・・・・一体・・<br><br>はぁ～<br>自己嫌悪だわ～<br>
(2003年09月05日 15時06分59秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
kirara☆彡
さん
こんにちは☆<br><br>X座標・・Y座標・・・<br>苦手な関数みたいだわ。（笑）<br><br>あのね・・プリンター・・・・<br>黒インク交換したら・・・印刷できるようになったわ。<br>ありがとう。。。<br><br>もしかしたら・・・<br>インクがなくなっていたのかな？<br><br>それで・・・<br>インク切れのお知らせランプが壊れて・・・<br>点灯できなかったのかも・・・<br><br>でも・・・<br>印刷の時の残は・・確かにあった。<br><br>でも・・・<br>取り出したインク・・空のように軽かった｡<br><br>良くわからないね｡<br><br>お騒がせしました｡<br>心配してくれて・・ありがとう☆<br><br>それと・・一日早いけど･・・・<br>2周年・・おめでとう☆<br><br>これからも、よろしくお願いします。
(2003年09月05日 17時03分39秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
viafm
さん
あやや、応用編ですね。<br>まだやっていませんが・・・面白いですね！<br>また来ます！チャオ☆
(2003年09月05日 17時42分51秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
hosi-teresa
さん
ﾊﾞﾀﾝ♪Ю―(^O^ )ｵｼﾞｬﾏｼﾏｰｽ<br>開設二年の間に沢山の方に教えてきたのですね。<br>難しいことは判りませんが、<br>それでも、ここまできました。<br>感謝していますよ。(’-’*)ﾖﾛｼｸ♪
(2003年09月05日 17時56分16秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
つっちゃん422
さん
師匠、またまた英語に感じる私…<br>質問ですらわからない。。。笑
(2003年09月05日 19時41分13秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
hikohkigumo
さん
頭の中がぁ～～ 今度はぐちゃぐちゃですぅ～～<br>時間を置いて、もう一度読み間する～～<br><br>ところで、いよいよ２年なんですね☆<br>おめでとうございます<br>これからもますますがんばってください<br>
(2003年09月05日 19時58分18秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
momo1980jp
さん
あ・・・今日は久々の出勤でくたびれたせいか、まったりさんの解説が理解できない(笑)<br>あとで、またゆっくり読もうっと。<br><br>で、で。。。またまたトラブル！<br>辞書登録した単語が変換できなくなるってあるんですかあ？<br>どうも、うちのＸＰは文字変換がおかしくなっちゃうんですけど、まさか辞書登録したものまで消えちゃうなんて、そんなのあり？<br>あ～～ん・・・いっぱい登録してあったはずなのに、半分しかツールに入ってないんです～～（泣）
(2003年09月05日 21時17分33秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
西浜荘
さん
昨日の日記で遣ってみたんです位置をずらしていけば好いような気がするけど駄目かな。<br>明日は２周年記念おめでとう<br>私は婚礼の御呼ばれです（PCはお休みです）<br>http://nisihama.hp.infoseek.co.jp/guppy/frame.html<br>今日はこんな事してました綺麗なフレシュのメニューだな
(2003年09月05日 21時46分22秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
meiakira
さん
開設２周年おめでとうございま～す＼(^o^)/・・・<br><br>まったりさんの、おかげで楽しくHP作りさせて頂いております(’▽’*)<br>Cドライブも、ずいぶん増えましたし～(〃⌒∇⌒)ゞえへへっ♪ <br>これからも、よろしくお願い致します。。。<br><br>今日の日記の内容を、一度読んだだけでは<br>悲しいかな、頭がついて行きません(´‥｀)ﾄﾎﾎ･<br>プリントアウトして、じっくり見せて頂きますm(__)m
(2003年09月05日 21時51分54秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
∑(￣□￣;2周年･･･<br><br>古株師匠･･･ワハハも･･･11月で2周年だわ！<br><br>楽天･･･まったり師匠やモックン☆彡師匠のおかげで<br>大変楽しくやらせて頂いておりますＡ(＾＾;<br><br>本当に<br>＜FONT size=7 color="#0000ff"＞<br>♪ア☆リ v(＃⌒o⌒＃)v ガ☆ト♪<br>＜/font＞<br>です！！<br><br>
(2003年09月05日 22時01分40秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
cocoa110
さん
え～ もう２年ですか。 続けるって・・。<br>参加したばかりです まだまだ読んでない日記が いっぱいあります。 やめないでね～。
(2003年09月05日 22時25分31秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
mikan550205
さん
明日で２周年ですか！！！<br>(*^ｰ^)/ﾟ･:*:･｡おめでとう｡･:*:･ﾟ＼(^ｰ^*)<br><br>楽天仕様のタグを考えて頂いたお陰で<br>毎日タグのにらめっこ！！！<br><br>含みのある言葉を理解出来ず素通りも・・・<br><br>じっくり考えます。<br><br>これからも楽しいタグを待っています。<br><br>
(2003年09月05日 22時33分37秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
あ～ちゃん☆〃
さん
こんばんわあ！ ヾ（ ） 後ろ向き～♪<br>色々ししょーのところ見ながら遊んでたら<br>勉強してたら夜になっちゃった[壁]｀∀´)Ψヶヶヶ☆<br>日記も今かいた⌒⌒⌒(~ _△_)~ｷﾞｬﾊﾊ!<br>夜はひえるねえ～(」゜ロ゜)」 <br>一回タグ成功しちゃうとまた新しい物をおぼえたくなっちゃうみたい（＾ｕ＾）プププ<br>あともうすぐで２周年だね♪ヽ(￣▽￣)ノ<br><br>しかしたべすぎでお腹が。。！Σ(￣□￣;)。。<br>ダイソーの洗剤は油が一度で取れなくて<br>３回洗わないといけないの。。<br>もしかしたら字もストーカーできちゃうのかな？<br>やってみよう～っと♪<br>失敗恐れないわたし（＾ｕ＾）プププ☆<br><br>今日は楽天調子いいですね☆軽いし♪<br><br>
(2003年09月05日 22時35分34秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
かずさか2920
さん
こんばんは<br><br>明日で２周年ですね。<br>おめでとうございます。<br><br>楽天、<br>メンテ後から掲示板の書き込みの異常があったようですね。<br>今日は、なおっているようです。<br><br>また見に来ます。<BR><BR><BR><BR><br>
(2003年09月05日 23時09分25秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
モモママ2002
さん
明日で２周年なんですね。<br>おめでとうございます。<br>この間のＩＤの件ですが、フジバカマさんが少し手を伸ばしてくれました。<br>何となくですが分かったような・・・。<br>タグを頂いたのでそのままテストのページに貼っています。<br>これで１文字でも抜けたら・・・パニックになるでしょう。
(2003年09月05日 23時28分40秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
ｋａｎｋｏ－ｍａｍ
さん
明日は、二周年らしく・・・<br>おめでとうございます。<br>我が家も明日はイベントが・・・<br>我が娘の誕生日<br>これを期に？また、ここでお勉強頑張ります・・・？<br>すくろ～る<br>って、おもしろかったぁ。
(2003年09月06日 00時09分13秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
ぎゅうてぃ
さん
え～～～ん今夜はなんだか？？？私に焦りがあるのいで、もう少し時間のある時頑張ってみます。<br>そして、え～～～ん２周年なのに、私はお留守・・・。<br>おめでとうございますが、直接言えなくて残念でなりません(；.；)
(2003年09月06日 00時12分06秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
よぉ★0605
さん
明日で ２周年ですかぁ！<br>おめでとうございます(*^。^*)<br>明日 また爆睡してしまったら いいそびれちゃうんで今日のうちに。。。<br><br>文字のマウスストーカー 面白いですね～♪
(2003年09月06日 00時47分10秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
中国ビジネス成功実践会
さん
おはようござチャイナ<br>残暑お見舞い申しあげます<br>今年の夏は冷夏で9月に入り暑さ厳しいですね<br>元気でお過ごしください<br>
(2003年09月06日 06時41分57秒)
p(￣o￣)qｵｯ!!w(￣0￣)wﾊｰ!!
ηёηё★彡
さん
2周年オメットナゲキッス♪(▼ヽ▼*)ンー.....ヾ(*▼・▼)ノ⌒☆チュッ♪<br>!(ﾟ∇ﾟﾉﾉ"☆(ﾟ∇ﾟﾉﾉ"☆(ﾟ∇ﾟﾉﾉ"☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ!!!<br>(≧∇≦)／□☆□＼(≧∇≦ )カンパーイ!!<br>っでパーティーは何するの？？<br>ﾜｸﾜｸ ((o(⌒∇⌒ o)(o ⌒∇⌒)o))ﾜｸﾜｸ<br><br>
(2003年09月06日 09時08分00秒)
おはよう
羅維夢
さん
開設２周年おめでとうございま～す <br> ( *^0^)／＼(^0^ *)<br>私はまだ１ヶ月の新米なので、こちらのＨＰ参考<br>になります。 o(*^-^*)o<br><br>・・・昨日から失敗の連続！マウス・ストーカー<br>なのですが、何とか画像はでました。()←をつけて<br>いたのが失敗だったようです。 でも、動かないままなんです。 ページの真ん中に張り付いたまま・・・(*_m_*)ｳｰﾑ･･･また伺います。<br><br>
(2003年09月06日 10時06分08秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
hosi-teresa
さん
ﾊﾞﾀﾝ♪Ю―(^O^ )２周年ヽ(*⌒∇⌒*)ﾉ::･’ﾟ☆｡.::･’ﾟ★｡.::･’ﾟ☆｡ﾜｰｲ!!<br>おめでとうございます。( ^_^)／▼☆▼＼(^_^ ) ﾁﾝ♪<br>これからも宜しくお願いします。
(2003年09月06日 10時25分39秒)
Re:ストーカー応用を考える人に・ぃょぃょ(9/5)
ayuayu12
さん
２周年おめでとうございまぁ～～～す！！<br>パチパチパチ！！<br>これからも、ヨロシクゥ～～＼(´▽｀*)(*´▽｀)/
(2003年09月06日 10時51分56秒)
【毎日開催】
15記事にいいね！で1ポイント
けとけと。
けとけと。のメモ的ＨＰ ワンコもいるよ（＾＾）
カテゴリ
未整理
(4038)ペット
(397)あぁ．振り返る一日
(355)商品情報
(27)サイトブックマーク
(87)電話・インターネット
(118)家電・PC・ソフトウェア
(210)食べ物やスーパー
(61)おしごと
(6)HTML・スタイルシート
(79)楽天さん絡み
(186)スクラップ
(12)ゴミ
(16)・2026年10月
・2026年09月
・2026年09月
・2026年08月
© Rakuten Group, Inc.
