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

解決済みの質問

オンマウスでサムネイル画像のコマ間余白設定について

サムネイル画像にオンマウスにより、拡大画像が表示されるページを作っています。
htmlは勉強中なのですがjavascriptの知識がなくソースを借用しているためカスタマイズ方法がわからずに作業が中断している状態です。

タテに並んでいるサムネイル同士の間に5pxほどの隙間を設けたいのですが、どのようにソースを修正すればよろしいのか、どなたか教えていただけると助かります。
よろしくお願いいたします。
サムネイル画像はsamフォルダに、メイン画像はmainフォルダに入れています。

ページソースを貼り付けておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<center>
<table width="710" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#0000ff" height="50" align="center"><b><font color="#ffffff" size="4">メインタイトル</font></b></td>
</tr>
<tr>
<td bgcolor="#0000ff"><font color="#00ffff" size="2"> ↓のサムネイル画像にマウスポインタを合わせて下さい</font></td>
</tr>
</tbody>
</table>
</center>
<center>
<script type="text/javascript">
<!--
function over( name , comm ) {
document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示
document.getElementById( "comment" ).innerHTML = comm;//コメントを表示
document.getElementById("field").style.position="relative";//CSSの相対位置指定
document.getElementById("field").style.top=0+document.body.scrollTop;//イベントが発生したY位置
}
function out() {
document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = '';
}
//-->
</script>
<table>
<tbody>
<tr>
<td width="100">
<img src="sum/001.jpg" target="_top" onmouseover="over('main/001','');" onmouseout="out();"><br>
<img src="sum/002.jpg" target="_top" onmouseover="over('main/002','');" onmouseout="out();"><br>
<img src="sum/003.jpg" target="_top" onmouseover="over('main/003','');" onmouseout="out();"><br>
<img src="sum/004.jpg" target="_top" onmouseover="over('main/004','');" onmouseout="out();"><br>
<img src="sum/005.jpg" target="_top" onmouseover="over('main/005','');" onmouseout="out();"><br>
</td>
<td valign="top" width="600">
<table id="field">
<tbody>
<tr>
<td id="gazou"></td>
</tr>
<tr>
<td id="comment" class="com"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>



</center>
</body>
</html>

投稿日時 - 2011-05-23 12:20:07

QNo.6757551

困ってます

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

>サムネイル同士の間に5pxほどの隙間を設けたいのですが
とのことなので、javascriptというよりはHTML、CSSの問題ではないでしょうか?
(なぜご提示のようなマークアップなのかはかなり疑問ですが、それはおいておきます)

サムネイルの画像に
margin-bottom:5px;
などの指定をしておけばよさそうですが、テーブルの中の画像全部対象というわけにもいかないので…

<td width="100" id="thumbnail">
<img src="sum/001.jpg" target="_top" alt=""><br>
<img src="sum/002.jpg" target="_top" alt=""><br>
<img src="sum/003.jpg" target="_top" alt=""><br>
<img src="sum/004.jpg" target="_top" alt=""><br>
<img src="sum/005.jpg" target="_top" alt=""><br>
</td>
とでもしておいて、CSSで
#thumbnail img {margin-bottom:5px; }
とかではいかがでしょうか?

<参考>
http://www.htmq.com/style/margin.shtml
http://w3g.jp/css/box/margin

投稿日時 - 2011-05-23 22:16:25

お礼

ご回答ありがとうございました。
なるほど!これはjavascriptではなくCSSだったのですね。
まだhtmlをかじり始めたばかりという事もあって
全てがjavascriptで行なうものとばかり思っていました。
もっと勉強しなければ、と実感しました。
さっそく組み込んでテストしてみたいと思います。
ありがとうございました!

投稿日時 - 2011-05-23 23:13:38

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

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

回答(1)

あなたにオススメの質問