![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
初心者です。。
画像のランダム表示で、下のものを使っているのですが、
画像の上にカーソルをもっていったときに手のマークにしたいのですが、
どのようにすればできるのでしょうか?
onclickを使っているからだと思うのですが、
A href=を使えばできるのでしょうか?
よろしくお願いします。
<script type="text/javascript">
<!--
var imgs = new Array;
var n = 5;
var i;
for(i=0;i<n;i++){
imgs[i] = new Image();
}
imgs[0].src="image/001.jpg";
imgs[1].src="image/002.jpg";
imgs[2].src="image/003.jpg";
imgs[3].src="image/004.jpg";
imgs[4].src="image/005.jpg";
function disp(img){
img.src=imgs[Math.round(Math.random()*(n-1))].src;
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>
<body>
<div align="center">
<img src="image/001.jpg" border="0" onclick="disp(this)">
</div>
</body>
</html>
No.3ベストアンサー
- 回答日時:
> <A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A>
できるよ
でも <A href> より <A onClick> の方が楽かも。
>thisが入っているのもよくわかっていません
http://www.tohoho-web.com/java/variable.htm
this → これ
通常「自身」と言われる。
呼ばれたオブジェクト(この場合タグ)ごと持って居るのがこのthis
dispの受け取りはimgという限定をしているのでaタグから呼ぶとthisがaになってしまうのでつじつまが合わず動作しない。
imgから呼ぶとthisがimgとなるので動作する。
aから呼ぶには意図的に内包するimgを抜き出さなければならない。
http://www.tohoho-web.com/js/image.htm#images
この回答への補足
なんとなくわかったような、、わからないような、、
すっきりしない状態なのですが、
↓で、一応できたのですが、前のときに比べると全然違ったものに見えます。
<A href>を使うとこのようになるものなのですか?
<SCRIPT language="JavaScript">
<!--
function imgRandom(){
var imgMax = 3;
var imgRandom = Math.floor(Math.random() * imgMax);
if(imgRandom == 0) document.AAA.src="image/001.jpg";
else if(imgRandom == 1) document.AAA.src="image/002.jpg";
else if(imgRandom == 2) document.AAA.src="image/003.jpg";
}
// -->
</SCRIPT>
</head>
<body>
<A href="javascript:imgRandom()"><IMG src="image/001.jpg" name="AAA" id="AAA" border="0"></A>
</body>
No.6
- 回答日時:
お取り込み中すみませんが、変更される画像が1つなら最初にその画像を割り出しておけば良いじゃないですか?
例えば沢山ある画像の中から'001.jpg'を含む画像を常に変更するようにしたら下のようになりますよ。
たぶんね。
<html>
<head>
<title>img</title>
<script>
imgs=[
"image/001.jpg",
"image/002.jpg",
"image/003.jpg",
"image/004.jpg",
"image/005.jpg"
]
window.onload = function(){
for (var i = 0; i < document.images.length; i++){
if(document.images[i].src.indexOf('001.jpg') != -1){
randimg = document.images[i]
}
}
}
function disp(){
randimg.src=imgs[Math.round(Math.random()*(imgs.length-1))];
alert('id=' + randimg.id + 'src=' + randimg.src)
}
</script>
</head>
<body>
<div align="center">
<!--a hrefで変更-->
<a href="javascript:disp()"><img src="image/0.jpg" border="0" id="ss0"></a>
<!--a onclickで変更-->
<a href="#" onclick="disp();return false"><img src="image/0.jpg" border="0" id="ss1"></a>
<!--img onclickで変更-->
<img src="image/001.jpg" border="0" onclick="disp()"><!--変更される画像-->
</div>
</body>
</html>
No.5
- 回答日時:
<a href="javascript:disp(this.images[0])">
で元のまま動くのでは?
この回答への補足
<a href="javascript:disp(this.images[0])">
でも、
<a href="javascript:disp(this.imgs[0])">
でも、動かないよ。
もう少し自分で勉強してみます。
どうもありがとうございます。
No.4
- 回答日時:
> if(imgRandom == 0) document.AAA.src="image/001.jpg";
確認してないけど それで動くんじゃないのかな。
>href="javascript:imgRandom()"
href="javascript:disp(document.AAA)"
こうしたら前のまま使えるんじゃない?
この回答への補足
>href="javascript:disp(document.AAA)"
で動きました。
だいぶ理解が深まってきました。
ありがとうございます。
ちなみに、name、idを与えない場合はonclickを使うしかないということでしょうか?
↓document.imgs[i].srcがダメで動いていないのですが。
そういうことですよね?
<SCRIPT language="JavaScript">
<!--
var imgs = new Array;
var n = 3;
var i;
for(i=0;i<n;i++){imgs[i] = new Image();}
imgs[0].src="image/001.jpg";
imgs[1].src="image/002.jpg";
imgs[2].src="image/003.jpg";
function disp(){
document.imgs[i].src=imgs[Math.round(Math.random()*(n-1))].src;
}
// -->
</SCRIPT>
</head>
<body>
<A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A>
</body>
No.2
- 回答日時:
> A href=を使って
<a style="cursor:pointer"><img /></a>
何故試してみないの?
この回答への補足
下にもかいたのですが、ポインタを変えるのはできたのです。
<A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A>
↑みたいなことができないのかと思っているのですが、、。
おとといからweb製作を始めた素人なのですがアドバイスいただけますか?
function disp(img)なのに、onclick="disp(this)"で、
()のなかにthisが入っているのもよくわかっていません。
よろしくお願いします。
No.1
- 回答日時:
この回答への補足
saykaさんありがとうございます。
<img src="image/001.jpg" border="0" onclick="disp(this)" style="cursor: pointer;">
でできたのですが、
onclickではなく、A href=を使って同じようなscriptをつくることはできますでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
条件分岐でキーが入力されてい...
-
更新ごとに重複しない画像を5枚...
-
html内にスライドショーを複数設置
-
Accessible News Sliderついて
-
IE でうまく動かない
-
Vb.net2005での画像の合成方法
-
ラズパイでno module named zbar
-
MAX関数を使ってからLEFT JOIN...
-
【iOS及びAndroid】リンク画像...
-
リンク先がそれぞれ別の画像の...
-
中心を軸にくるくる回るjQuery ...
-
連番画像「次へ」「前へ」で、...
-
jqueryを使って無駄なspanタグ...
-
htmlとcssに関する質問です
-
画像がプルプルふるえるんです。
-
右クリック禁止スクリプト挿入法
-
表示・非表示のスクリプトで、...
-
Gif画像のアニメーションが再生...
-
商品画像リンク (image_link)...
-
iframe内のリンクが飛ばないの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
【OpenCV】二値画像後、白の部...
-
外部javascriptの重複を防ぐには
-
Vb.net2005での画像の合成方法
-
pythonで、tkinterとpillowの組...
-
html内にスライドショーを複数設置
-
ラズパイでno module named zbar
-
libjpegライブラリの使い方につ...
-
外部ファイルにしたら文字化け...
-
リンク先を動的に変更する
-
プログラムの上手な書き方は?
-
error LNK2019 未解決のシンボ...
-
複数画像のランダム複数表示(...
-
pythonのpygameでキャラクター...
-
imgボタンにfocusの当て方
-
(javascript)HTMLで指定した...
-
OpenCVで固定枠で画像を操作す...
-
imageクラスからiconクラスに変...
-
<noscript>と</a>の関係
おすすめ情報