画像の入れ替えについて

質問

よく中古車検索サイトの詳細画面にある、サムネイル画像をクリックすると、ステージ？の画像が入れ替わるものを、作りたいと思うのですが、ご指導よろしくお願いします。

参考URL
http://www.truck-bank.net/cgi-bin/car_more.cgi?r=3978

回答No.3

leap_day · ベストアンサー

leap_dayです（＾＾）

＞画像の上にマウスポインタを置いても矢印のままなので指にならないのですが、これはなおせますか？

スタイルシートを使えばハンド表示できますよ

『style="cursor:hand"』

こういう感じで

<img src="./sample0.gif" onClick="SwapImage('./sample0.gif')" style="cursor:hand">

もし画像のサイズが同じであるならばこういう書き方もできます

<STYLE type="text/css">
<!--
.b1 {
width:100px;
height:100px;
border:1px solid;
cursor:hand;
}
-->
</STYLE>

<script language="JavaScript">
<!--
function SwapImage(img) {
obj = document.getElementById("image");
obj.src = img;
}

//-->
</script>

<img src="./sample0.gif" onClick="SwapImage('./sample0.gif')" class="b1">
<img src="./sample1.gif" onClick="SwapImage('./sample1.gif')" class="b1">
<img src="./sample2.gif" onClick="SwapImage('./sample2.gif')" class="b1">
<img src="./sample3.gif" onClick="SwapImage('./sample3.gif')" class="b1">

<img src="./hyouji.gif" name="image" width="300px" height="300px" border="1">

お礼

ほんとに助かりました。とても丁寧にありがとうございました。

回答No.2

leap_day

必要な部分だけ書きますので他の部分は調整してください(widthやborderや画像のパスのこと)

<script language="JavaScript">
<!--
function SwapImage(img) {
obj = document.getElementById("image");
obj.src = img;
}

//-->
</script>

<img src="./sample0.gif" onClick="SwapImage('./sample0.gif')">
<img src="./sample1.gif" onClick="SwapImage('./sample1.gif')">
<img src="./sample2.gif" onClick="SwapImage('./sample2.gif')">
<img src="./sample3.gif" onClick="SwapImage('./sample3.gif')">

<img src="./hyouji.gif" name="image">

とするとsample0～3をクリックするとhyouji.gifがそれぞれのsample画像に切り替わります

≪簡単ですが説明≫
obj = document.getElementById("image");
これで『name=image』指定したところを書き換えます

obj.src = img;
例えばsample0をクリックしたとすると
onClick="SwapImage('./sample0.gif')"
の『./sample.gif』を『name=image』の画像のパスとして指定しています

お礼

バッチリです。感動です。まさにこれを必要としていました。
本当にありがとうございます。
それと、もう一つ質問したいのですが
画像の上にマウスポインタを置いても矢印のままなので指にならないのですが、これはなおせますか？
よろしくお願いします。

回答No.1

ANASTASIAK

http://www.red.oit-net.jp/tatsuya/java/image3.htm
イベントをonclickに直せばそのまま使えます。

お礼

参考になりました。ありがとう御座いました。