こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

投稿日時 - 2012-02-17 04:24:49

QNo.7310010

困ってます

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

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

★ 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 13:43:21

お礼

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

投稿日時 - 2012-02-17 19:54:57

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(3)

ANo.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 16:06:14

お礼

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

投稿日時 - 2012-02-17 19:53:46

ANo.1

</head>までに入れるJavaScript
<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">

投稿日時 - 2012-02-17 04:58:47

補足

ありがとうございます
ただ私は初心者でして JavaScript と言うのがわかりません
ホームページビルダーだけでは実現できないものでしょうか
よろしくお願いします

投稿日時 - 2012-02-17 08:36:10

お礼

ありがとうございました

投稿日時 - 2012-02-17 19:51:53

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-