ホームページで画像に効果をつけたい

解決済

質問者：okgootaro
質問日時：2012/02/17 04:24
回答数：3件

上に2行4列の表を作りサムネイルの画像を配置してあります　このサムネイルをポイントすると　別枠（下の大きな枠）に拡大画像を表示させたいのです
ロールオーバー効果かなと思っていろいろ試すのですがうまくいきません
どのようにやればよいのか　どなたかアドバイスよろしくお願いします

Windows7でホームページビルダーv14を使っています

通報する

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

質問の本文を隠す

回答 (3件)

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

No.2ベストアンサー

回答者： CalmTrip
回答日時：2012/02/17 13:43

よく似たようなものなら、フレームを使われたら。

　

★ Base.html
<TITLE>Base</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="s_111" src="s_111.html">
<FRAME name="s_222" src="s_222.html">
<NOFRAMES>
<BODY>
<P>このページを表示するには、フレームをサポートしているブラウザーが必要です。</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

★ s_111.html
<TITLE>s_111</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<COL span="2" width="200">
<TBODY>
<TR valign="middle" align="center">
<TD><A href="img_1.jpg" target="s_222"><IMG src="img_1s.jpg" width="128" border="0"></A></TD>
<TD><A href="img_2.jpg" target="s_222"><IMG src="img_2s.jpg" width="128" border="0"></A></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

★ s_222.html
<TITLE>s_222</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

- 0
- 件

通報する

この回答へのお礼

ありがとうございました
参考にさせていただいてなんとか実現しようと思います

通報する

お礼日時：2012/02/17 19:54

No.3

回答者： sendaifuji
回答日時：2012/02/17 16:06

No.1です

サンプルでご希望のページを作ってみました。
参照URLからご覧ください。
下記がその際のHTMLソースになります。
ホームページビルダーをお使いでしたら、タブをページ編集からHTMLソースに切り替えていただき手打ち又はコピペでソースと画像を入れれば動くと思います。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function dispChange(id) {

if(id.style.display=="none"){
id.style.display="block";
}
else{
id.style.display="none";
}
}

function gazou(mySrc){
document.myimg1.src=mySrc;
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>画像入れ替わり</title>
</head>
<body>
<p><a href="JavaScript:void(0)" onmouseover="gazou('a1180_003598_m.jpg')">
<img src="a1180_003598_m.jpg" width="160" height="100" border="0" /></a>
<a href="JavaScript:void(0)" width="160" height="100" onmouseover="gazou('a0001_007986_m.jpg')">
<img src="a0001_007986_m.jpg" width="160" height="100" border="0" /></a>
<a href="JavaScript:void(0)" width="160" height="100" onmouseover="gazou('a0002_002517_m.jpg')">
<img src="a0002_002517_m.jpg" width="160" height="100" border="0" /></a></p>
<p><a href="JavaScript:void(0)" onmouseover="gazou('a0001_009185_m.jpg')"><img src="a0001_009185_m.jpg" width="160" height="100" border="0" /></a>
<a href="JavaScript:void(0)" onmouseover="gazou('a0002_002519.jpg')">
<img src="a0002_002519.jpg" width="160" height="100" border="0" /></a>
<a href="JavaScript:void(0)" onmouseover="gazou('a0002_002518_m.jpg')">
<img src="a0002_002518_m.jpg" width="160" height="100" border="0" /></a></p>
<p>
<img src="a1180_003598_m.jpg" width="320" height="200" border="0" name="myimg1" />
</p>
</body>
</html>

参考URL：http://8989t.com/aaa/