こんにちわ

 何度か他の方のHPで見たのですが、WEB上のカーソルを
アニカーソルのように自分のイラストにする方法を知りたいのですが、
その方法がJavaScriptなのか、XMLとかなのか、そういう事も全然
わかっておりません。とりあえず前回同じ質問をHTMLのカテゴリでさせて
頂きました時に、カーソルを自分のイラストが追いかけるというのなら
JavaScriptであるとお伺いしたのでこちらのカテゴリで再度ご質問させて
頂きますm(_ _)m 他の方のHPに直接お伺いしようかとも思ったのですが、
アドレスがわからなくなってしまいましたので、お助け下さいませm(_ _)m

A 回答 (3件)

あれ・・・?


よく読んだらこっちも実はお探しのものとは違うようですね^^;

すみません、早とちりばっかりで(汗)
    • good
    • 0
この回答へのお礼

わたしの書き方がわかりにくいようです。こちらこそすみません。
いろいろお調べ頂いていたみたいでありがとうございますm(_ _)m

お礼日時:2001/01/25 12:27

すみません、質問の意味を間違って解釈してました^^;



ってことでこっちのURLをどうぞ。

これで間違いないはずです(笑)

参考URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=31028
    • good
    • 0

こんにちわ


お助けくださいというのは、アドレスを紹介してくださいということでしょうか?^^;
とりあえず前の質問のURLを載せておきます。
そこには参考ページのURLが載ってますんで、そちらを参考にして勉強してみてはいかがでしょうか?

技術的な面(作ったけどエラーが出る等)であればまた補足してください。

参考URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=21048
    • good
    • 0
この回答へのお礼

 すみません、どうも書き方が悪かったようです。
カーソルにイラストがついてくるタイプのものは
shigatsu様に教えて頂いたので、URLもわかるのですが、
カーソル自体を変えるタイプのものを探しています。

お礼日時:2001/01/25 09:54

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qマウスカーソルに合わせて画像が移動するjavascriptで困っていま

マウスカーソルに合わせて画像が移動するjavascriptで困っています。

マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、
マウスカーソルの動きについていけず、画像がワープ(?)してしまいます。
解決策が分かる方がいらっしゃいましたら、ご指摘願います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>
<SCRIPT>

<!--

function move(event){

img.style.left=event.x;
img.style.top=event.y;
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<IMG src="hoge.png" name="img" style="position:absolute;" >
<div onmousemove="move(event);"
style="width:500px; height:500px; background-color:#cccccc;"></div>

</BODY>
</HTML>

マウスカーソルに合わせて画像が移動するjavascriptで困っています。

マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、
マウスカーソルの動きについていけず、画像がワープ(?)してしまいます。
解決策が分かる方がいらっしゃいましたら、ご指摘願います。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE></TITLE>
<SCRIPT>

<!...続きを読む

Aベストアンサー

単純にimgの上にマウスが移動するとイベントが発生しなくなるからでは?

参考例としてこんな感じでは?
(IE7、8では取得の方法が変わっているかも…)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div.box { width:500px; height:500px; background-color: #ddd; }
#img0 { position:absolute; }
</style>
</head>
<body>
<div class="box" onmousemove="move(event)">
<img src="A.jpg" id="img0">
</div>

<script type="text/javascript">
<!--
var styl = document.getElementById("img0").style;
function move(evt) {
var x, y;
/*@cc_on @if(@_jscript)
x = evt.x + document.body.scrollLeft;
y = evt.y + document.body.scrollTop
@else*/
x = evt.pageX, y = evt.pageY;
/*@end @*/
styl.left = x + 'px';
styl.top = y + 'px';
}
//-->
</script>
</body>
</html>

単純にimgの上にマウスが移動するとイベントが発生しなくなるからでは?

参考例としてこんな感じでは?
(IE7、8では取得の方法が変わっているかも…)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div.box { width:500px; height:500px; background-color: #ddd; }
#img0 { position...続きを読む

Q【javascript クロスブラウザ】処理中はカーソルを砂時計にしたい

漠然とした言い方ですが、javascript実行中はカーソルを砂時計にしたいです。
すごく具体的な例を示すと、new Ajax.Request実行直前にカーソルを
砂時計に、onSuccessに指定したfancitonの最後でカーソルを
デフォルトに戻したいです。

基本的な動作を検証するhtmlを書いてみました。

<html>
<head>
<style>
<!--
div {
height: 100%;
width: 100%;
}
-->
</style>
<script type="text/javascript"><!--
function pleaseWait(){
document.body.style.cursor = 'wait';
setTimeout(function(){document.body.style.cursor = 'default';},2000);
}
//--></script>
<head/>
<body>
<div onmousedown="pleaseWait();">
</div>
</body>
</html>

windows環境で、IE6,FireFox3,Opera9,Safari(3.2.1),Google Chrome
で試してみました。ブラウザ毎の結果を以下に記します。

■IE,FireFox
クリック後、2秒間は砂時計のカーソルになり、
その後元に戻りました。(これが期待している動作です。)

■Opera
なんの反応もありませんでした。

■Safari,Google Chrome
クリック後、砂時計になり、マウスを動かさなければ砂時計のまま。
マウスを動かせば、元に戻る。

opera,Safariでも期待した結果を得るにはどうしたら良いでしょうか?
名案ありましたら教えてください。

漠然とした言い方ですが、javascript実行中はカーソルを砂時計にしたいです。
すごく具体的な例を示すと、new Ajax.Request実行直前にカーソルを
砂時計に、onSuccessに指定したfancitonの最後でカーソルを
デフォルトに戻したいです。

基本的な動作を検証するhtmlを書いてみました。

<html>
<head>
<style>
<!--
div {
height: 100%;
width: 100%;
}
-->
</style>
<script type="text/javascript"><!--
function pleaseWait(){
document.body.style.cursor = 'wait';
setTimeout(function(...続きを読む

Aベストアンサー

現状、CURSORプロパティーの実装はWindows版IE、FireFoxだけです。
代案として、DHTML&CSSを用いて処理中と処理完了をガイドする
ツールチップを表示/非表示する、またはマウスポインターの座標上に
画像カーソルを表示/非表示する。

Qjavascript素人なので詳しく教えて頂きたいと思います。

javascript素人なので詳しく教えて頂きたいと思います。

サイトリニューアルに伴い、以下の仕様に変えたいと思っています。
このスクリプト自体他の人が作ったものなのでよく理解できていません。。


以下ページにある「前の写真へ」「次の写真へ」のボタンをクリックするとサムネイルの枠線が移動し、
且つ、メインの大きい写真が変わるスクリプトを使用しています。

http://www.all-eyefulhomenavi.com/kamimura/urawa/example/0017/index.html

【現在のJavascriptの仕様】
A-E(5つ)の画像が切り替えられる仕様

「次へ」の仕様を実現するために、現在の仕様になっているのだと思いますが、
今の仕様ですと点数をきっちりいれないとエラーになるため、修正をしたいと思っています。


【新仕様】
(1)画像点数は1~点数制限なしで対応した切り替え記述

(2)a,b,c,dなど画像に番号をつけるのではなく1,2,3,4で番号をつける。


よろしくお願いします。

javascript素人なので詳しく教えて頂きたいと思います。

サイトリニューアルに伴い、以下の仕様に変えたいと思っています。
このスクリプト自体他の人が作ったものなのでよく理解できていません。。


以下ページにある「前の写真へ」「次の写真へ」のボタンをクリックするとサムネイルの枠線が移動し、
且つ、メインの大きい写真が変わるスクリプトを使用しています。

http://www.all-eyefulhomenavi.com/kamimura/urawa/example/0017/index.html

【現在のJavascriptの仕様】
A-E(5つ)の画像が...続きを読む

Aベストアンサー

#1です。
スクリプトをちゃんと見てはいませんが・・・、ご自分で修正するのなら以下のようなことも参考にしてください。

仮に、使用するスライドを1~n(nは可変)として、現在表示しているスライド番号をPN(デフォルト時は1)などと仮定しておきましょう。
最初に、n(スライドの総数)をどのように受け渡すかについてですが、HTML側の記述を簡単にするなら、スクリプト側で、始めに一度HTML内のスライド数を数えるルーチンを実行しておくとかの方法もありますし、それが面倒ならHTML内に直接 n=**; のように記述して定義してしまうとか・・・

例えば、表示する次の番号や前の番号について言えば、ケース分けで記述しているとnが大きくなった時に面倒ですし、この方法では、そもそもnの可変性の確保が難しいですね。
function next(p){
  next = (p % n) + 1;
}
function prev(p){
  prev = (p + n - 2) % n + 1;
}
などというように一般化しておいて、next(PN)といった使い方をすることでnの可変性を保持できます。
(スライド番号を 0~n-1 にしておいたほうが計算式は簡単になりますが)

総数を可変にするためにスクリプト全体をそれに応じて修正することになるので、結局、全体を0から作り直しても大差ないでしょうという意味でした。
要領良く記述すれば、半分以下ぐらいの行数にできるかも・・・
頑張ってください。

#1です。
スクリプトをちゃんと見てはいませんが・・・、ご自分で修正するのなら以下のようなことも参考にしてください。

仮に、使用するスライドを1~n(nは可変)として、現在表示しているスライド番号をPN(デフォルト時は1)などと仮定しておきましょう。
最初に、n(スライドの総数)をどのように受け渡すかについてですが、HTML側の記述を簡単にするなら、スクリプト側で、始めに一度HTML内のスライド数を数えるルーチンを実行しておくとかの方法もありますし、それが面倒ならHTML内に直接 n=**; の...続きを読む

Qjavascriptによるランダム画像表示のリンク指定について教えて頂

javascriptによるランダム画像表示のリンク指定について教えて頂きたく投稿しました。
以下のサイトを参考に作成したのですが、
http://www.geocities.jp/sii_side/chie/20090308/
画像に任意のリンクを貼りたいと思っているのですが、なかなかうまくいきません(泣)
よろしくご教授ください

Aベストアンサー

//画像のURL
var img = [
'a.jpg', 'b.jpg', 'c.jpg', 'd.jpg',
'e.jpg', 'f.jpg', 'g.jpg', 'h.jpg'
];
var inum = img.length;

//任意のuri
var uriList = [
'a.html', 'b.html', 'c.html', 'd.html',
'e.html', 'f.html', 'g.html', 'h.html'
];
/**************************/

var rImg = new Image();
rImg.src = img[result[k]];
rImg.alt = alt[result[k]];

var a = document.createElement('a'); //a要素生成
a.href = uriList[result[k]]; //href属性値の設定
a.appendChild(rImg); //img要素追加
var cell1 = row.insertCell(0);
cell1.appendChild(a); //a要素追加

var text = document.createTextNode(str[result[k]]);

こんな感じでしょうか。

//画像のURL
var img = [
'a.jpg', 'b.jpg', 'c.jpg', 'd.jpg',
'e.jpg', 'f.jpg', 'g.jpg', 'h.jpg'
];
var inum = img.length;

//任意のuri
var uriList = [
'a.html', 'b.html', 'c.html', 'd.html',
'e.html', 'f.html', 'g.html', 'h.html'
];
/**************************/

var rImg = new Image();
rImg.src = img[result[k]];
rImg.alt = alt[result[k]];

var a = document.creat...続きを読む

Qマウスカーソルを画像や文字に重ねるとカーソルのすぐ右下に画像を表示する

マウスカーソルを画像や文字に重ねるとカーソルのすぐ右下に画像を表示するようにしたいのですが、どのようなHTMLタグやjavascriptを使えばいいですか?

Aベストアンサー

4つ上の質問と似ていますね。
 http://oshiete1.goo.ne.jp/qa4606506.html
そこで質問されているライブラリを利用すれば、比較的簡単かと…

残念ながら、ライブラリのHPがつながりませんが、サンプルページが残っていましたので
 http://boxover.swazz.org/example.html​


人気Q&Aランキング

おすすめ情報