- ベストアンサー
ホームページで画像に効果をつけたい
上に2行4列の表を作りサムネイルの画像を配置してあります このサムネイルをポイントすると 別枠（下の大きな枠）に拡大画像を表示させたいのです ロールオーバー効果かなと思っていろいろ試すのですがうまくいきません どのようにやればよいのか どなたかアドバイスよろしくお願いします Windows7でホームページビルダーv14を使っています
- okgootaro
- お礼率95% (63/66)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
よく似たようなものなら、フレームを使われたら。 ★ 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>
その他の回答 (2)
- sendaifuji
- ベストアンサー率32% (90/281)
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-transitional.dtd"> <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/
お礼
ありがとうございました 大変なお手間をとらせてしまいました 申し訳ありません
- sendaifuji
- ベストアンサー率32% (90/281)
</head>までに入れるＪａｖａＳｃｒｉｐｔ <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> 小さな画像のところのタグ <a href="JavaScript:void(0)" onmouseover="gazou('入れ替えたい大きな画像.jpg')"> <img src="小さい画像.jpg" border="0"</a> 大きな画像のところのタグ <img src="大きな画像.jpg" border="0" name="myimg1">
お礼
ありがとうございました
補足
ありがとうございます ただ私は初心者でして JavaScript と言うのがわかりません ホームページビルダーだけでは実現できないものでしょうか よろしくお願いします
お礼
ありがとうございました 参考にさせていただいてなんとか実現しようと思います