ベストアンサー

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

2012/02/17 04:24

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

okgootaro
お礼率95% (63/66)

ホームページ作成ソフト
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Calm Trip（@CalmTrip）
ベストアンサー率41% (511/1244)

2012/02/17 13:43 回答No.2

よく似たようなものなら、フレームを使われたら。　 ★ 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>

質問者

お礼 2012/02/17 19:54

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

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

sendaifuji
ベストアンサー率32% (90/281)

2012/02/17 16:06 回答No.3

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/

質問者

お礼 2012/02/17 19:53

ありがとうございました大変なお手間をとらせてしまいました　申し訳ありません

ログインすると、全ての回答が全文表示されます。

sendaifuji
ベストアンサー率32% (90/281)

2012/02/17 04:58 回答No.1

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

質問者