- 締切済み
javascriptを使い、サムネイル表示
サンプルＨＰ⇒http://cartown.jp/detail_dt.php?car_id=1990056 のような、サムネイル画像と拡大画像を表示させる記述方法を 教えてください。 下記のような回答文を確認したのですが、img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。こんな超初心者ですが、よろしくお願い致します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> function showImg(){ document.getElementById("image").src=this.src; } function setup(){ var thumbnails=document.getElementsByName("thumbnail");//name="thumbnail"とついているimg要素を列挙 for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;//↑で列挙したものにonclickイベントを結びつける } window.onload=setup; </script> <style type="text/css"> .main td{ width:300px; height:300px; } </style> </head> <body> <table border class="main"> <tr> <td><img id="image" width="300" height="300"></td> <td> 文章 </td> </tr> </table> <!--ここから下の画像はサムネイル用ではなく、上に表示する予定の画像と同じもので width属性とheight属性を指定して大きさを変えています。(ここでは全部300x300の画像とします。)--> <table border> <tr> <td><img name="thumbnail" src="img1.png" width="48" height="48"></td> <td><img name="thumbnail" src="img2.png" width="48" height="48"></td> <td><img name="thumbnail" src="img3.png" width="48" height="48"></td> <td><img name="thumbnail" src="img4.png" width="48" height="48"></td> <td><img name="thumbnail" src="img5.png" width="48" height="48"></td> </tr> <tr> <td><img name="thumbnail" src="img6.png" width="48" height="48"></td> <td><img name="thumbnail" src="img7.png" width="48" height="48"></td> <td><img name="thumbnail" src="img8.png" width="48" height="48"></td> <td><img name="thumbnail" src="img9.png" width="48" height="48"></td> <td><img name="thumbnail" src="img10.png" width="48" height="48"></td> </tr> </table> サムネイルクリックで拡大します。 </body> </html>
- wrurun
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- utun01
- ベストアンサー率40% (110/270)
まずソースをちゃんと読めるようになりましょう。 ご提示の内容は、本当にサンプルとして簡潔に書かれていますので、これくらいは読めなければカスタマイズできません。 > img要素を列挙する記述やonclickイベントを結びつける記述すらわかりません。 img要素はHTML部分で列挙されています。 「<img name="thumbnail" src="img1.png" width="48" height="48">」 の部分です。 onclickへのバインドはコメントでも記載されていますが、 「for(var i=0;i<thumbnails.length;i++)thumbnails[i].onclick=showImg;」 の部分です。 各サムネイル要素のonclickにshowImgメソッドを関連付けています。 もし自分で作るのが難しいようであれば、 スライドショー系のソースはたくさん紹介されているので、以下のようなページで探してみるのがいいかもしれませんね。 http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery
関連するQ&A
- FireFoxで背景が表示されない。
Webページを作っておりまして、FireFoxで表示を確認した際にボックスの背景が出ない問題が起こっており、 調べたりしても出てこず、1週間位頭を悩ませております。 どこがイタズラしてるか分からないので、CSS,HTML全てのせます 申し訳ありません。 CSSはこのように書いています <!-- body { background: url('./img/Background.png') repeat; } body { scrollbar-face-color:#1B1D1D; scrollbar-highlight-color:000000; scrollbar-shadow-color:999999; scrollbar-arrow-color:999999; scrollbar-track-color:#2A2929; scrollbar-3dlight-color:#A4A5A5; scrollbar-darkshadow-color:#A4A5A5; } body { font-size: 75%; /* IE */ } html>/**/body { font-size: 12px; /* Except IE */ } body { line-height : 130% ; } .box1{ width:750px; margin-buttom:70px; background-color:f0f0f0; } .box2 { width:425px; height:124px; font-size:12px; border:1px dashed #000000; overflow:auto; background-color:ffffff; margin-right:15px; margin-top:8px; padding-left:10px; padding-top:10px; } --> そしてHTMLはこのようになっています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <Meta http-equiv="Content-Script-Type" content="text/javascript"> <Meta http-equiv="Content-Style-Type" content="text/css"> <Meta name="GENERATOR" content="AmBuilder"> <link rel="StyleSheet" href="Style.css" type="text/css"> <link rel="stylesheet" type="text/css" href="http://wing2.jp/add/adv.css" /></head> <body> <div align="center"> <p class="box1"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top"> <td width="5"><img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"><img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"><img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"><img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr valign="top"> <td width="33"><a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"></a></td> <td width="57"><a href="about.htm" target="_self"><img src="./img/M-About.png" width="57" height="25" border="0" alt="About"></a></td> <td width="56"><a href="movie.htm" target="_self"><img src="./img/M-Movie.png" width="56" height="25" border="0" alt="Movie"></a></td> <td width="46"><a href="link.htm" target="_self"><img src="./img/M-Link.png" width="46" height="25" border="0" alt="Link"></a></td> <td width="557"><img src="./img/M-Space.png" width="557" height="25" border="0" alt="Space"></td> <td width="1"><img src="./img/M-Right.png" width="1" height="25" border="0" alt="MenuLine"></td> </tr> </table> <table style="float:right"> <tr align="left"> <td> <p class="box2"> ◇ 更新履歴 </td> </p> </tr> </table> </p> </div> </body> </html> 前回も同じような下らない質問をしてしまったのですが。今回も皆さんよろしくお願い致します。 長文、駄文すみませんでした 一応、サイトのURIです http://wing2.jp/~movie_village/
- ベストアンサー
- CSS
- 透過してしまうのですが・・・
現在タグでメニューバーをつくっているのですが、 背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>○○</title> <style type="text/css"> <!-- body { background-image: url(jfes_menupict.jpg); background-repeat: no-repeat; margin-left: 50px; margin-top: 20px; } --> </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
- Firefoxで崩れる
IE6.0 IE7.0では、問題なく表示されるのですが、Firefoxで 一部のページが右にずれてしまうのです。 問題点を教えていただけますと幸いです。 正常なページのソース <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
- 分割した画像の結合表示について
とてもはまっています。よろしくお願いいたします。 以下の通りのページを作った際にInternet Explorer以外のブラウザ、FirefoxやOperaではそれぞれの画像に数ピクセルの隙間ができてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Language" CONTENT="ja"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> <TITLE>TEST</TITLE> </HEAD> <BODY> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" SUMMARY="TEST"> <TR> <TD><IMG SRC="image/top_1.gif" WIDTH="700" HEIGHT="50" ALT="1"></TD> </TR> <TR> <TD><IMG SRC="image/top_2.gif" WIDTH="700" HEIGHT="50" ALT="2"></TD> </TR> <TR> <TD><IMG SRC="image/top_3.gif" WIDTH="700" HEIGHT="50" ALT="3"></TD> </TR> </TABLE> </BODY> </HTML> 今までも同様のことをしていたのですが全て正常に表示されていました。 今回初めてDOCTYPEを指定して作っています。 DOCTYPEを指定しなければ正常に表示されますが指定している状態で隙間無く表示させるにはどうしたら良いでしょうか。
- ベストアンサー
- HTML
- 下記のソースですが、画面一杯に表示されません、なぜでしょうか？
<HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE></TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#663300" link="#0000FF" vlink="#99CCFF"> <DIV style="top :0px;left : 0px; position : absolute; z-index : 1; width : 750px; height : 900px; visibility : visible; " id="Layer1"> <CENTER> <TABLE width="100%" border="0" cellspacing="0" cellpadding="5" bgcolor="#68B921"> <TR ALIGN="CENTER" VALIGN="MIDDLE"> <TD><IMG src="" width="111" height="96" alt="アイコン"></TD> <TD WIDTH="100%" VALIGN="TOP"></TABLE> </CENTER> </DIV> </BODY> </HTML>
- ベストアンサー
- Windows 95・98
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- DOCTYPEをStrictにするとtdに余白が表示される
こんにちは。 下記の様なhtmlを組み、枠を表示させてようとしているのですが、 DOCTYPEをStrictにすると、tdの上下に余白が表示されうまくいきません。 枠の画像を上下左右の４つに分解し、ブラウザ上で合体させようとしています。 どうしてもStrictで組みたいのですが、Strictでは無理なのでしょうか？ ★html★ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" charset="UTF-8" /> </head> <body> <table> <tr> <td colspan=3><img src="waku-top.jpg" /></td> </tr> <tr> <td><img src="waku-left.jpg" /></td> <td width=357px></td> <td><img src="waku-right.jpg" /></td> </tr> <tr> <td colspan=3><img src="waku-bottom.jpg" /></td> </tr> </table> </body> </html> ★css★ table{border:0;border-collapse:collapse;} tr,td{padding:0;} よろしくお願いします。
- ベストアンサー
- HTML
- 表示すると文字化けします
下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- IEでfor()が機能しないのはなぜ？解決方法は？
下記プログラムでは、 ボタンを押すとカウントダウンが開始され、 ０になったときに、table内の１００x１００の画像４枚を 一気に１枚の２４４x２４４の画像と切り替えるというものです。 Firefoxではカウントダウンが実行された後に、 画像が切り替わるのですが、 IEではカウントダウンが実行されずに 画像が切り替わってしまいます。 特にエラーメッセージは出ません。 IEでもちゃんとカウントダウンをさせた後に 画像の切換えをしたいのですが、どうすればいいのでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> <!-- #xxx{ position: absolute; top: 110px; left: 50px; } table{ border-spacing:0; border-collapse:collapse; } td{ border:1px solid #000; padding:10px; width:100px; height:100px; } //--> </style> <script language="JavaScript"> <!-- function start(){ document.mF.ttt.value = "まだ切換えていません"; } function kirikae(){ for(var i=5; 0<=i; i--){ alert(i); //カウントダウン if(i==0){ //カウントダウンが0になったら xxx.innerHTML = '<img src="r.gif" width="244" height="244">'; //画像切換え document.mF.ttt.value = "切換えました"; } } } //--> </script> </head> <body onload="start()"> <form name="mF"> <div id="xxx"> <table> <tr> <td><img src="1.jpg" width="100" height="100"></td> <td><img src="2.jpg" width="100" height="100"></td> </tr> <tr> <td><img src="3.jpg" width="100" height="100"></td> <td><img src="4.jpg" width="100" height="100"></td> </tr> </table> </div> <input type="button" value="全画像の切換え" onclick="kirikae()"> <input type="text" name="ttt"> </form> </body> </html>
- ベストアンサー
- JavaScript
- HP作製。titleが反映されない。
titleを書いたのに反映されない。 8年前に知人がつくってくれたHPをほぼそのまま使っています。 最近,各ページにtitleがあった方がSEO上いい,という話しを聞きました。 そこで私もそうしたのですがうまくいきません。 うまくゆかないという意味は エクスプローラ(10)の「表示」→ソースではどのページも以下の(トップベージ)になってしまいます。 またグーグルで検索できません。(ただしこれはまだ1月前に修正したばかりのせいかも) 一方,「右クリック」→ソースの表示では,自分が開いたページ(該当ページ)が反映されます。 どこに問題があるのでしょうか。 (トップページ) <html> <head> <title>(略)</title> <meta name="author" content="(略)"> <meta name="description" content="(略)"> <meta name="keywords" content="(略)"> <meta http-equiv="content-type" content="text/html;charset=x-sjis"> </head> <frameset cols="150,*" border="0"> <frame name="left" src="left.html"> <frame name="top" src="top.html"> </frameset> </html> (該当ページ) <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>(略。ただしトップページとは違うタイトル</title> <meta name="description" content="(略)"> </head> <body> <div class="medatu">Book</div> <br> <center> <table align="center" cellpadding="0" cellspacing="0"> <tbody> <tr> <td><img src="image/tb01.gif" width="25" height="25" border="0"></td> <td background="image/tb02.gif"></TD> <td><img src="image/tb03.gif" width="25" height="25" border="0"></td> </tr> <tr> <td background="image/tb08.gif"></td> <td bgcolor="#ffffff"> <pre> (略) </pre> </td> <td background="image/tb04.gif"></td> </tr> <tr> <td><IMG src="image/tb07.gif" width="25" height="25" border="0"></td> <td background="image/tb06.gif"></td> <td><IMG src="image/tb05.gif" width="25" height="25" border="0"></td> </tr> </tbody> </table> </center
- ベストアンサー
- その他(ソフトウェア)
お礼
ご連絡頂き、ありがとうございます。 別のサンプルルーチンを用いて、うまく可動しました。 html と Flash ばかりで、Javaをまったく勉強していませんでした。 過去にbasic言語で開発をしていたので、構文がなんとなく判る程度です。 ご指導頂き、ありがとうございました。 敬具