- 締切済み
複数のJavascript の組込み方についてです。初心者で色々試して
複数のJavascript の組込み方についてです。初心者で色々試してがんばったのですが、行き詰ってしまいました。私の作りたい物は、ページの左側にリスト部分があり、そのリストをクリックすると右側に写真が出るものです。そしてその写真をクリック、もしくは画像下に作ったいくつかの対応したボタンを押すと、新たな写真が最初に出た写真と同じ場所に表示される、というものになります。私が試行錯誤してみたソースでは、一つ目のリストでは「マウスが触ると写真が切り替わる基本スクリプト」になるように、そして二つ目のリストでは「複数の画像を同じ場所に表示させ切替える」を目指しています。もしお詳しい方で何かお気付きの点があれば、お力を貸して頂けますでしょうか。どうか宜しくお願い致します。 <body> <div align="center"> <TR> <SCRIPT language="JavaScript"><!-- a_data=new Array(); a_data[0]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><img galleryimg=no src="../img/hana1.jpg" onmouseover="this.src='../img/hana2.jpg';" onmouseout="this.src='../img/hana1.jpg';"></TD></TR></TR>' +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明<br>写真にポインタを合わせると、写真が替わります。' +'</TD>' +'</TR></TABLE></CENTER>'; a_data[1]='<CENTER><TABLE><TR>' +'<TD style="width:300;"><IMG name="myimg" src="../img/0.png" style="float:right; margin:10px 0px 10px 20px;"></TD></TR></TR>'; +'<TD style="font-size:14px;vertical-align:bottom;">' +' 写真の説明' <INPUT type="button" value="写真１" OnClick="document.myimg.src='../img/1.png';"> <INPUT type="button" value="写真２" OnClick="document.myimg.src='../img/2.png';"> <INPUT type="button" value="写真３" OnClick="document.myimg.src='../img/3.png';"> <INPUT type="button" value="最初の写真" OnClick="document.myimg.src='../img/0.png';"> +'</TD>' +'</TR></TABLE></CENTER>'; function pic(sel){document.getElementById("l_menu").innerHTML=a_data[sel];} //--> </SCRIPT> </TR> <div id="A_spc"> <TABLE> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(0);"> <CENTER>リスト１</CENTER> </td> </tr> <tr> <td style="width:120;height:30;background-color:#ffeeee;font-size:12px;" onclick="pic(1);"> <CENTER>リスト２</CENTER> </td> </tr> </TABLE> </A_spc> </div> <div id="B_spc"> <TABLE> <TR> <TD colspan=2 style="width:350; font-size:12px;padding-left:20;padding-top:35;" id="l_menu"> <CENTER><p class="sample1">左のリストをクリックするとココに写真が出ます。</p></CENTER> </TD> </TR> </TABLE> </B_spc> </div> </div> </div> </body>
- vtsxndw
- お礼率50% (2/4)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
すくりぷとがうごかないかんきょうのひとのこともかんがえましょう！ innerHTMLでごっそりかきかえると、いべんとなんかがやばくない？ りすとのmouseoverも、あまりすすめられたものじゃないよ
- babu_baboo
- ベストアンサー率51% (268/525)
その２ばぶ。 <script type="text/javascript"><!-- //@cc_on function Screening ( e ) { if( 'string' === typeof e ) e = document.getElementById( e ); var es = e.childNodes, e, t, c = 0; while( t = es[c] ) if( 1 !== t.nodeType ) e.removeChild( t ); else c += 1; return es; } function getCount ( e ) { var cnt = 0, s = e.nodeName; while( e = e.previousSibling ) if( s === e.nodeName ) cnt += 1; return cnt; } function selectNo ( ary, n ) { for( var e, c = 0; e = ary[ c ]; c += 1 ) e.style.display = n == c ? 'list-item': 'none'; return ary[ n ]; } function menuChecker ( evt ) { var e = evt.srcElement || evt.target, c, n, t; if( 'LI' === e.nodeName ) { content = selectNo( contents, getCount( e ) ); selectNo( content.childNodes, cNo = 0 ) } } function clickHandler( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var cs = content.childNodes; if( /^btn_\d$/.test( e.id ) ) { switch( e.id ) { case 'btn_1': cNo = 0; break; case 'btn_2': if( 0 < cNo ) cNo -= 1; break; case 'btn_3': if( cNo < cs.length - 1) cNo += 1; break; case 'btn_4': cNo = cs.length -1; break; } selectNo( cs, cNo ); } } var menu = Screening( 'PhotoList' ); var contents = Screening( 'PhotoContents' ); var content = selectNo( contents, 0 ); var cNo = 0; (function ( ) { for( var i = 0, c; c = contents[i++]; ) { Screening( c ); selectNo( c.childNodes, cNo ); } document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', clickHandler, false ); })(); //--> </script>
- babu_baboo
- ベストアンサー率51% (268/525)
もじすうのせいげんがあるのでぶんかつします。 ていじされたさんぷるは、むししました。 ぜんかくくうはくは、すべてはんかくにしてね ぐろーばるへんすうをつかわないようにするのは、めんどうなのでパス。^^; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> ol, ul { list-style: none; margin: 0; padding: 0; } #PhotoList { float: left; width: 300px; background-color: #dfd; } #PhotoContents { margin-left: 300px; } #control { margin-left: 300px; background-color: #ccc; width: 480px; border: 2px #ccc inset; padding: 1ex; } .photo { border: 2px #888 inset; width: 480px; height: 300px; } .message { font-size:12px; color:green; margin: 1em; } .hide { display: none; } </style> <body> <ul id="PhotoList" onmouseover="menuChecker( event )"> <li> 写真１の説明 <li> 写真２の説明 </ul> <ul id="PhotoContents"> <li> <ol> <li class="photo"> <img src="photo1_1.jpg" alt="photo1_1.jpg"> <li class="message"> 写真の説明1-1 </ol> <ol> <li class="photo"> <img src="photo1_2.jpg" alt="photo1_2.jpg"> <li class="message"> 写真の説明1-2 </ol> <ol> <li class="photo"> <img src="photo1_3.jpg" alt="photo1_3.jpg"> <li class="message"> 写真の説明1-3 </ol> </li> <li> <ol> <li class="photo"> <img src="photo2_1.jpg" alt="photo2_1.jpg"> <li class="message"> 写真の説明2-1 </ol> <ol> <li class="photo"> <img src="photo2_2.jpg" alt="photo2_2.jpg"> <li class="message"> 写真の説明2-2 </ol> <ol> <li class="photo"> <img src="photo2_3.jpg" alt="photo2_3.jpg"> <li class="message"> 写真の説明2-3 </ol> </li> </ul> <form action="#"> <div id="control"> <input type="button" value="最初の写真" id="btn_1"> <input type="button" value="前の写真" id="btn_2"> <input type="button" value="次の写真" id="btn_3"> <input type="button" value="最後の写真" id="btn_4"> </div> </from>
- reggaepunc
- ベストアンサー率59% (64/108)
ここに何種類か書き方があるので、ご参考に弄ってみて下さい。 innerHTMLは直感的でわかりやすいです。 「複数の画像を同じ場所に表示させ切替える」もできるかと。 http://www.0yen-coding.com/2009/06/innerhtml.html あと、掲載htmlでミスがありますね。 </A_spc>と</B_spc>は要らないと思いますよ。
お礼
教えて頂いたサイトのinnerHTMLのサンプル０３というのが、私のしたいと思っていた動きを完璧に表現していました。こちらを参考に私の書いたものと組み合わせたら、ちゃんと動いてくれました！以前試行錯誤したものだと、それぞれのJavascript 単体では動いてくれるのですが、組み合わせたり『 ' 』が入っているラインを入れると動かなくなってしまっていました。このサイトには他にも興味深い例がいくつも載っていて、innnerHTMLを使ってもっと色々な表現をしてみたいと思うようになりました。的確なアドバイスが載っているサイトを教えて頂き、本当にありがとうございました！！
関連するQ&A
- エラーが起きてしまいます
アルバムページを作ろうと思っていたのですが どこが、どう間違っているのでしょうか？ 一応表示はできていると思うのですが… <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language=javascript> var prevObj = null function chBorder(elem,color) { if(prevObj != null) { prevObj.style.borderColor = "#ffffff" } prevObj = elem elem.style.borderColor = color } </SCRIPT> </HEAD> <BODY> <TABLE> <TBODY> <TR> <TD> <IMG onclick="myImg1.src=this.src" src="1.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="2.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="3.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="4.jpg" width="60"> <IMG onclick="myImg1.src=this.src" src="5.jpg" width="60"> </TD> </TR> <TR> <TD align="center"> <IMG id="myImg1" src="0.jpg" width="300"> </TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- JavaScript
- 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>
- 締切済み
- JavaScript
- javascriptでスロットゲームを作ろうとしています。
javascriptでスロットゲームを作ろうとしています。 途中まではなんとかできたんですけど、出来ないところがあるんで質問したいと思います。 <html> <head> <title>スロットゲーム</title> </head> <body> <h3>スロットゲーム</h3> <hr> <form name="slot"> <table border="2"> <tr> </tr> <tr bgcolor="#CCCCCC"> <td><div id="dram0">☆</div></td> <td><div id="dram1">☆</div></td> <td><div id="dram2">☆</div></td> </tr> <tr> <td><input type="button" value="ストップ" onClick="dramstop(0)"></td> <td><input type="button" value="ストップ" onClick="dramstop(1)"></td> <td><input type="button" value="ストップ" onClick="dramstop(2)"></td> </tr> <tr> <td colspan="3"><input type="button" value="スタート" onClick="dramreset()"></td> </tr> </table> </form> <hr> <div id="rireki"></div> <script language="JavaScript"> img = new Array("<img src='0.png'>" ,"<img src='1.png'>","<img src='2.png'>" ,"<img src='3.png'>" ,"<img src='4.png'>","<img src='5.png'>","<img src='6.png'>" ,"<img src='7.png'>","<img src='8.png'>","<img src='9.png'>"); kiroku = new Array(); rrk = ""; rrk_num = 0; dramreset(); dramstart(); function dramreset() { var s = ""; for (i=0; i<3; i++) { s += img[kiroku[i]]; document.slot.elements[i].disabled = false; } rrk_num++; } function dramstart() { for (i=0; i<3; i++) { if (!document.slot.elements[i].disabled) { r = Math.floor(Math.random() * 10); document.getElementById("dram" + i).innerHTML = img[r]; } } setTimeout("dramstart()",200); } function dramstop(btn) { r = Math.floor(Math.random() * 10); document.getElementById("dram"+btn).innerHTML = img[r]; document.slot.elements[btn].disabled = true; kiroku[btn] = r; } </script> </body> </html> ★絵柄がランダムじゃなくて順番に回転させる。 ★各絵柄がすべてそろうと、大当たりとしてページの背景色が変化する。 ★大当たり後、再度スタートボタンを押すと、背景色は元の色にもどる。 ★すべての絵柄が止まってないのに、大当たりの背景色変化が起こらないようになっている。
- ベストアンサー
- JavaScript
- テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。
現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか？ テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <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 style="position:relative; top:-4;"> <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><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm
- ベストアンサー
- 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サービス）
- td width="180" と固定してるのですが・・
<div style="width:500;height:220;overflow:auto; scrollbar-3dlight-color:#9acd32; scrollbar-arrow-color:#9acd32; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#9acd32; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#9acd32; scrollbar-track-color:#ffffff; "> <table style="font-size:13px; color:magenta;"><tr align="center"> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> <td width="180"><img src=""></td> </tr></table> </div> img には 110×150 のサイズの写真を入れています。 div width="500" にしているので、180×3=540 ですから３枚目のimgが途中で切れて、残りが横スクロールに引っ込むと思ってたのですが、実際にはimgがぎゅうぎゅうに詰まって4.8枚見えるようになります。 何故 td width を固定しているのに変動してしまうかがわかりません。 どうすれば img と img のあいだを余裕もたせて表示することができますでしょうか？ よろしくご教授のほど願います。
- ベストアンサー
- HTML
- table要素の使い道
tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>
- ベストアンサー
- HTML
- HTMLについて
現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です
- ベストアンサー
- HTML
- クリックで色変更後に既に変更された要素を戻すには
javascriptの勉強をしています。 htmlのテーブルタグで、ブロックが３つあるとします。 ■■■ それぞれのブロックを<div id="00"><div id="01"><div id="02"> として定義しています。 onclick="document.getElementById('00').style.backgroundColor='#ff0000' でクリックしたブロックの色を変更しています。 質問したい内容は、「１箇所をクリックした時に、他の２箇所の色を戻す」方法です。 以下はサンプルです。 -------------------------------------- <TABLE BORDER="2" bordercolor="#000000"> <TR> <TD bgcolor="#008000"> <div id="00"> <IMG onclick="document.getElementById('00').style.backgroundColor='#ff0000';document.getElementById('01').style.backgroundColor='#008000';document.getElementById('02').style.backgroundColor='#008000';" border="0" src="item/img/00.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="01"> <IMG onclick="document.getElementById('01').style.backgroundColor='#ff0000';" border="0" src="item/img/01.png" width="36" height="36"> </div> </TD> <TD bgcolor="#008000"> <div id="02"> <IMG onclick="document.getElementById('02').style.backgroundColor='#ff0000';" border="0" src="item/img/02.png" width="36" height="36"> </div> </TD> </TABLE>--------------------------------------------- １箇所をクリックした時に、他の２箇所の色を戻すには 「00をクリックした時に、01の色を戻す02の色を戻す」のように、 ３箇所全てに記述しなければならないのでしょうか？ テーブルのブロックが少なければ、これでもいいのですが、 たとえば１００個とか１０００個になった時にはとても大変な作業になってしまいます。 他になにか効率のいい記述の仕方はありますでしょうか？ ご存知の方いらっしゃいましたら、ご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像をクリックして元に戻すには
ホームページでよく見かけますが、写真等をクリックして別ページの大きな画像を表示させたあと、その画像をクリックすると前のページに戻るのをみかけます。 アンカーで元のファイル名を記述すればできますが、 特定のファイル名を指定することなく、 <INPUT TYPE="BUTTON" VALUE="前のページへ戻る" onClick="history.back();"> のようなものを、ボタンではなく画像をクリックしたときに機能するようにするには(img src=）で、どのように記述すればいいのでしょうか。 検索してみたのですが、なかなか見つけられませんのでよろしくお願いします。 次のような例を見つけましたが このTABLEを使わないで直接画像のみで指定したいのですが。 <script language="javascript"> function onPh(img) { myImg.src = img myTable1.style.display = "block" myTable2.style.display = "none" } function offPh() { myTable1.style.display = "none" myTable2.style.display = "block" } </script> －－－－－－－ <TABLE border="3" table id="myTable1" width="50%" height="50%" onclick="offPh()" style="display:none;"> <tr> <td><img id="myImg" width="100%"></td> </tr> </TABLE> <table border="0" id="myTable2" style="display:block;"> <tr> <td><FONT color="#660066"><img src="hit3.jpg" width="80" height="60" onclick="onPh(this.src)"><br>
- ベストアンサー
- HTML
お礼
babu_baboo様、htmlを書いてくださって本当にありがとうございます！見た目が同じページを作るのでも、こんなに中身は違うのですね。洗練された書きかたで、このhtmlから新しく学ばせて頂くことが多くとても参考になりました。お力添え、本当に感謝しております！！