画像のランダム表示

解決済

質問者：yskeoi
質問日時：2007/04/19 21:24
回答数：6件

初心者です。。
画像のランダム表示で、下のものを使っているのですが、
画像の上にカーソルをもっていったときに手のマークにしたいのですが、
どのようにすればできるのでしょうか？
onclickを使っているからだと思うのですが、
A href=を使えばできるのでしょうか？
よろしくお願いします。

<script type="text/javascript">

</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： noname#39970
回答日時：2007/04/20 17:15

> <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">

</SCRIPT>
</head>
<body>
<A href="javascript:imgRandom()"><IMG src="image/001.jpg" name="AAA" id="AAA" border="0"></A>
</body>

補足日時：2007/04/20 19:21

通報する

- 0
- 件

通報する

No.6

回答者： noname#30818
回答日時：2007/04/21 06:02

お取り込み中すみませんが、変更される画像が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="javascript:disp()"><img src="image/0.jpg" border="0" id="ss0"></a>

<a href="#" onclick="disp();return false"><img src="image/0.jpg" border="0" id="ss1"></a>

<img src="image/001.jpg" border="0" onclick="disp()">
</div>
</body>
</html>

この回答への補足

indexOfを使うという手もあるのですね。
勉強になりました。
どうもありがとうございます。

補足日時：2007/04/21 15:08

通報する

- 0
- 件

通報する

No.5

回答者： noname#39970
回答日時：2007/04/20 23:40

<a href="javascript:disp(this.images[0])">

で元のまま動くのでは？

この回答への補足

<a href="javascript:disp(this.images[0])">
でも、
<a href="javascript:disp(this.imgs[0])">
でも、動かないよ。
もう少し自分で勉強してみます。
どうもありがとうございます。

補足日時：2007/04/21 15:05

通報する

- 0
- 件

通報する

No.4

回答者： noname#39970
回答日時：2007/04/20 19:44

> 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">

</SCRIPT>
</head>
<body>
<A href="javascript:disp()"><IMG src="image/001.jpg" border="0"></A>
</body>

補足日時：2007/04/20 21:02

通報する

- 0
- 件

通報する

No.2

回答者： noname#39970
回答日時：2007/04/20 00:32

> 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が入っているのもよくわかっていません。
よろしくお願いします。

補足日時：2007/04/20 10:48

通報する

- 0
- 件

通報する

No.1

回答者： noname#39970
回答日時：2007/04/19 21:35

<img style="cursor:pointer" />

http://www.tohoho-web.com/css/reference.htm#cursor

この回答への補足

saykaさんありがとうございます。

<img src="image/001.jpg" border="0" onclick="disp(this)" style="cursor: pointer;">

でできたのですが、
onclickではなく、A href=を使って同じようなscriptをつくることはできますでしょうか？

補足日時：2007/04/19 22:26

通報する