サムネイル画像をマウスオーバーすると写真が切り替わる方法

解決済

質問者：tukamotodaisuke
質問日時：2006/09/29 12:39
回答数：2件

htmlでホームページを作っているのですが、大きな写真の横に小さなサムネイル画像（前面、背面など角度の違う写真）を載せて、サムネイルをマウスオーバーすると同一のページで大きな写真が切り替わる仕組みを作りたいのですが、やり方がわかりません。
比較的簡単な方法での作り方を教えてください。宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： gaku1
回答日時：2006/09/29 14:41

大きな写真に名前を付けておいて，小さな写真のonMouseOverハンドラで，その名前のソースに，その小さな写真に対応する大きな写真のURLを代入するようにするのはどうでしょう。

簡単です。
＜center＞
＜img src="large/1.jpg" name="img"＞
＜hr＞
＜img src="small/1.jpg" onMouseOver="document.img.src='large/1.jpg'"＞
＜img src="small/2.jpg" onMouseOver="document.img.src='large/2.jpg'"＞
＜/center＞

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
簡単な設定で出来るのでとても参考になりました！

通報する

お礼日時：2006/10/02 22:23

No.1

回答者： noname#22222
回答日時：2006/09/29 13:12

こんな感じです。

・ヘッダでサムネイル画像に対応する画像を読み込んでいます。
・onMouseOver ="update_src(XXX,XXX);" でメイン画像を切り替えています。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
　　<link rel="stylesheet" type="text/css" href="../css/mystyle.css"/>
　　<script type="text/javascript" src="../script/mylibrary.js"></script>
　　<script>
　　　　var i;
　　　　var a_images = new Array(3);

　　　　for (i=0; i<3; i++) {
　　　　　　a_images[i] = new Image(323,267);
　　　　}

　　　　a_images[0].src　="new/holiday_01.gif";
　　　　a_images[1].src = "new/holiday_02.gif";
　　　　a_images[2].src = "new/holiday_03.gif";
　　</script>
</head>
<body bgproperties="fixed">



<div id="page">
　　<form id="main" name="main">
　　<center>
　　<table width="748">
　　　<tr>
　　　　<td width="110"><img src="new/holiday_01_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[0]);"></td>
　　　　<td width="110"><img src="new/holiday_02_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[1]);"></td>
　　　　<td width="110"><img src="new/holiday_03_sum.gif" width="109" height="83" onMouseOver ="update_src(document.main.holiday_photo, a_images[2]);"></td>
　　　　<td rowspan="6" width="506" valign="top">
　　　　<p align="center">
　　　　<img id="holiday_photo" name="holiday_photo" src="new/holiday_01.gif" width="323" height="267" vspace="10"></td>
　　　</tr>
　　</table>
　　<center>
　　<p></p>
　　</form>
<p></p>
</div>
</body>
</html>

/* ========================================================
　 mylibrary.js: Last update 2005/09/30 By XXXXXX
----------------------------------------------------------- */
function update_src(objects, img) {
　objects.src = img.src;
}