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

2023/08/15 11:37

このQ&Aのポイント

オンマウスにより、拡大画像が表示されるサムネイル画像ページを作成しています。htmlは勉強中であり、javascriptの知識が不足しておりソースをカスタマイズできません。タイトル間に5pxの隙間を追加したいのですが、修正方法がわかりません。
ページ中にあるサムネイル画像にオンマウスすると拡大画像が表示されるページを作成しています。HTMLの勉強中であり、JavaScriptの知識が不足しているためソースコードの修正方法がわかりません。サムネイル画像同士の間に5pxの隙間を追加する方法を教えていただけると助かります。
現在、オンマウスで拡大画像が表示されるサムネイル画像ページを作成しています。HTMLの学習中であり、JavaScriptの知識も限定的ですので、ソースコードの修正方法がわかりません。サムネイル画像同士の間に5pxの隙間を追加するための修正方法を教えてください。

ベストアンサー

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

2011/05/23 12:20

サムネイル画像にオンマウスにより、拡大画像が表示されるページを作っています。 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">  </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>

macauto
お礼率83% (20/24)

JavaScript
回答数1
ありがとう数2

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

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/05/23 22:16 回答No.1

＞サムネイル同士の間に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 23:13

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

関連するQ&A

画像にオンマウスで背景画像を固定
画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか？今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。また、styleに  を書いてみたりもしたのですが変化なしでした。ご存知の方、詳しい方アドバイスお願いします。
- ベストアンサー
- HTML
文字をオンマウスすると、画像がかわり、クリックで他のページへいくようにしたい。
初めてJavaを使いました。『文字にマウスを当てると、上に置いた画像がかわり、さらにその文字をクリックすると、他のページにいくようにしたいのです』文字にマウスを当てると、上に置いた画像が変わるとこまではできましたが、どうしても他のページへのリンクができません。よい方法を教えてください。作ったHTMLは以下のとおりです。 <SCRIPT language="JavaScript"></SCRIPT> <TABLE align="center"> <TBODY> <TABLE border="0" align="center"> <TBODY> <TR> <TD><IMG src="ankor.jpg" name="myBigImage" border="2"></TD> </TR> <TR> <TD><A href="javascript:void(0)" onmouseover="myChgPic('shanghai.jpg')">上海 <br> <A href="javascript:void(0)" onmouseover="myChgPic('italy.jpg')">イタリア <br> <A href="javascript:void(0)" onmouseover="myChgPic('canada.jpg')">カナダ　　　</A> 　　　</TD> </TR> </TBODY> </TABLE> 上海、カナダ、イタリアという文字をクリックしたら、その写真にかわり、文字をクリックしたらそれぞれのページにリンクさせたいのです。
- 締切済み
- JavaScript
tableを自動作成・追加できるプログラムを探しているのです・・
<table> <tbody> <tr> <td colspan="9" align="center" </TD></td> </tr> <tr> <td colspan="9" <A href="http:// target=" _blank"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"></td> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td></td> <td><img src=".jpg"></td> <td></td> <td> <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </td> <td></td> <td><img src=".jpg"></td> <td><img src=".jpg"></td> <td></td> </tr> <tr> <td><img src=".jpg"></td> </tr> </tbody> </table> こんなtableを作成し（tdには数値・文字列・画像が入ります）一つのhtmlファイルに一ヶ月に10個ほど手動でtableを追加しています。これを入力フォームより数値や文字列・参照画像を入力し、月ごとのhtmlにしてるので、指定したhtmlに反映させるようなプログラム（cgi? javascript? PHP?）をご存じの方いらっしゃいませんでしょうか？
- 締切済み
- HTML
表の枠を消して、さらにその枠のスペースを消すには？？
具体的に書くと、 <table bgcolor="#fafafa" border="0" cellpadding="0" cellspacing="0" > <tbody> <tr> <td> <a href="../prof/prof.html" target="content" onmouseover="document.images['img4'].src='profile.gif';showMsg('プロフィール');" onmouseout="document.images['img4'].src='profiles.gif';showMsg('...');" ><img name="img4" src="profiles.gif"></a> </td> </tr> </tbody> ・・・・ </table> として、表に画像を入れてるのですが、表の枠は表示されないものの画像と画像の間にほんのわずかな隙間があります。それすら完璧に消す方法ってありますか？ＩＥ６です。
- ベストアンサー
- HTML
オンマウスで画像と文字を同時に任意の位置に表示したい
絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される　（何も記載されていない位置に表示されるようにしたいです） 3.マウスを離したら最後に表示したものが消えずにそのまま画像だけ表示は一応できましたが、文字と同時にというのはわかりませんでした。それと何もないところに表示するのができませんでした。以下、作ったソースです。 <SCRIPT TYPE="text/javascript">  </SCRIPT>  <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10">　</Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品１</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品２</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品３</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table>  作品を追加していく形式のページなので、なるべくシンプルなソースでお願いします。
- 締切済み
- JavaScript
WEB制作に関する質問です。コンテンツをスライドに
ボタンをクリックするとtableの部分を垂直方向にスライドさせて切り替えたいのですが　なかなか、うまくいきません。こんな感じかなと思って、つくったのですが、まったく作動しません。何をどうすればいいか分かりません。どなたか、教えて下さい。 javascriptは少し分かるぐらいです。よろしくお願いします。コードは↓ 下のクリック画像だけ指定してあります。 html <div id="main_left"> 　<h2>見出し</h2> 　<img src="image/cicletop.jpg" width="33" height="33" /> 　<div id="shuraider"> 　　<table name="shuraid1" id="shuraid1"> 　　　<tr><td colspan="2">aaaaaa</td></tr> 　　　<tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> 　　　<tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid2" id="shuraid2"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td><td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid3" id="shuraid3"> <tr><td colspan="3">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</td></tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> <table name="shuraid4" id="shuraid4"> <tr><td colspan="2">aaaaaa</td></tr> <tr><td><img src="image/buttons_06.gif" width="56" height="57" /></td><td>aaaaaaaaaaaaaaaaa</tr> <tr><td><img src="image/menu.gif" width="114" height="30" id="menu10" name="menu10" onmouseover="document.menu10.src='image/amenu.gif'" onmouseout="document.menu10.src='image/menu.gif'" onclick="document.menu10.src='image/amenu.gif'" /></td> <td>aaaaaaaaaaaaaa</td></tr> </table> </div> <img src="image/ciclebottom.jpg" width="33" height="33" name="shuraid_botton" id="shuraid_botton" onclick="shuraido ()" /> </div> ここからcss #main_left{ width: 339px; } #main_left h2{ font-size: 18px; font-weight: bold; color: #ffffff; width: 339px; line-height: 2em; letter-spacing: 1em; background-image: url(../image/h2.jpg); background-color: #0F9; margin: 0; } #shuraider{ width: 337px; height: 120px; overflow: hidden; } ここからjavascript var i=1; function shuraido(){ if(i==1){ document.src="shuraid2"; i=2; } else if(i==2){ document.src="shuraid3"; i=3; } else if(i==3){ document.src="shuraid4"; i=4; } else{ document.src="shuraid1"; i=1; } } </script>
- ベストアンサー
- JavaScript
★PHP？★画像を縦横比を変えずに表示
画像を縦横比を変えずに表示したいです。簡単な方法を教えてください。 PHPで作成してます。下記の画像のサイズはバラバラです。 150*150の正方形の中に全て収めたいです。 <table> <tbody> <tr> <td><img id="imgtf" src="photo1.jpg" alt="" /></td> <td><img id="imgtf" src="photo2.jpg" alt="" /></td> <td><img id="imgtf" src="photo3.jpg" alt="" /></td> <td><img id="imgtf" src="photo4.jpg" alt="" /></td> <td><img id="imgtf" src="photo5.jpg" alt="" /></td> </tr> </tbody> </table> 何か方法はありますでしょうか？
- ベストアンサー
- PHP
onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。（例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、その下に「富士山」の文字を表示したい←これです。）下記のようにしています。 <script language="javascript">  </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- JavaScript
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですがその画像の切り替えをフェードでできないでしょうか問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいましたこういう質問のしかたで大変恐縮なのですが誰かご教授願えないでしょうか？？ scriptもjQueryも基本を理解できておらず、大変困っています。大変申し訳ありませんが、お願いいたします。
- ベストアンサー
- JavaScript
オンマウスで画像の入れ替え
<script language="JavaScript" type="text/JavaScript">  </script> <body onLoad="MM_preloadImages('./photo/','./photo/','./photo/','./photo/')"> <table width="0" border="0" cellspacing="0" cellpadding="3"> <tr> <td rowspan="2" align="center" valign="top"> <table width="0" border="0" cellspacing="0" cellpadding="3"> <tr> <td colspan="2"><img src="./photo/" width="240" height="320" name="big_photo"></td> </tr> <tr align="center"> <td><img src="./photo/" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/',1)"></td> <td><img src="./photo/" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/',1)"></td> </tr> <tr align="center"> <td><img src="./photo/" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/',1)"></td> <td><img src="./photo/" width="100" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('big_photo','','./photo/',1)"></td> </tr> </table> 以前、ホームページ作成会社に頼んで作成した、WEBサイトがありますが、今は廃業されて連絡がとれません。スキン式の写真ギャラリーCGIなのですが、スキンファイルのソースが上記ソースで、 <td colspan="2"><img src="./photo/" width="240" height="320" name="big_photo"></td> の部分に大きな１枚の画像があり、小さな画像４枚の部分をオンマウスすると画像が入れ替わります。この小さな画像４枚の部分は、元画像の小さなサムネイル画像が表示されますが、これをカスタマイズしたいのですが、ネットで探した限りではいいサンプルが見当たりません。カスタマイズ内容は他の画像４枚（NO1.gif、NO２.gif・・・）と用意して、そこの画像をオンマウスした場合にビック部分に画像を表示させたいのですが・・・・わかる方いらしゃいましたら、できれば教えてください。
- 締切済み
- JavaScript