オンマウス、オンクリックでのフレーム越えの画像変更の方法
- 左のフレームに写真のサムネイルを表示し、オンマウスやオンクリックで右のフレームに大きな画像とテキストを表示する方法について教えてください。
- 現在、左フレームに<img>タグを使用して画像のサムネイルを表示し、オンマウスで画像とテキストを変更していますが、フレーム越えができません。
- 改善策を教えてください。
- ベストアンサー
オンマウスで/オンクリックでの、フレーム越えの画像変更
困っています。 フレームを使ったページで 例えば、左のフレームに写真のサムネイルを表示し、 オンマウス、もしくはオンクリックで、 右のフレームに大きな画像とテキストを表示したいのですが、 フレーム越えができません。 今は、左フレームに <img onmouseover=pho.src="表示画像のアドレス";text.innerHTML="テキストの文" src="サムネイルの画像" width="100" height="75"> 右フレームに <table width="90%"> <tr> <td> <center><img id="pho" src="最初に表示される画像のアドレス"></center> </td> </tr> <tr> <td height="20" bgcolor="dimgray" align="center"style="filter:Alpha(opacity=80,enabled=70)" id="text"><b> 最初に表示される文 </td> </tr> </table> と、ＨＴＭＬでやってます。 ぜひ、改善策を教えてください。お願いします。
- t_harumaki
- お礼率57% (27/47)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<img onMouseover="parent.フレーム名.命令" width="幅" height="高さ"> といった様にparentメソッドを使えば、 別フレームの操作を行えます。 例：parent.a.location.href = http://～/; この例ではaフレームのURIをhttp://～/に設定しています。 間違っているかもしれませんが、これで試してみてください。
関連するQ&A
- ハーボットのフレーム。
某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか？ 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
- ホームページの画像が表示されない
宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記のHTMLは間違って居りますでしょうか困って居ります <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- 別フレームにＪＰＧ画像をｈｔｍｌページ無しでセンターに表示する方法
宜しく御願いします。 ページをフレームで縦切り２分割にして、左フレームの画像をクリックすると 右フレームに、画像が大きく表示されるホームページを作っていますが、 右フレームに表示される画像が左上寄りになります。 右フレームに表示される画像を、ｈｔｍｌページを用いて表示すれば センターに出来ることは判っているのですが、ＪＰＧ画像のみの表示で センターにする方法はあるのでしょうか。 左フレームのソースは以下のような物です。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <TABLE width="204"> <TR> <TD nowrap><A href="a.jpg" target="sub"><IMG src="as.jpg" height="100" width="75"></A></TD> <TD nowrap></TD></TR> <TR> <TD nowrap></TD> <TD nowrap><A href="s.jpg" target="sub"><IMG src="ss.jpg" height="75" width="100"></A></TD></TR> <TR> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 以下省略 ご存じの方、宜しく御願い致します。
- ベストアンサー
- HTML
- HTML テーブルに画像を貼り付けるときのサイズ
ページいっぱいに広がるテーブルをひとつ用意し、 それを横に3等分して、それぞれのセルの下部に画像を表示しようと思いました。 しかし、表示してみると、テーブルは画面の横幅よりも広がってしまい、思うとおりに表示できません。 画像の代わりに文字を表示してみると、思った位置に表示できているのですが・・・。 画像を、画面の横幅を3等分したセルいっぱいに表示するにはどうしたらよいのでしょうか？ 現在のソース： <TABLE WIDTH="100%" HEIGHT="100%"> <TR ALIGN="center" VALIGN="bottom"> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> <TD WIDTH="33%"> <IMG SRC="～～" WIDTH="100%"> </TD> </TR> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- Webの表で画像を並べたい
テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。 左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル（今後増やす予定です）を作り、画像を並べたいと思っています。 が、左の画像と右下（2つ）の画像、右下（2つ）の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。 何が原因だか分かりますか？どうかよろしくお願いします。 ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルタグの余白
テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています！！ <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>
- ベストアンサー
- Windows 95・98
- 忍者簡単ホームページの画像が表示されない
宜しくお願いします。 忍者ホームページの簡単ホームページでホームページを作りましたが画像が表示されず コメントだけの表示に成ります。 FFFFTPとかホストとか効きますが一度も利用したことが有りません HTMLはメモ帳で作成し画像は同じパソコンのデスクトップにフォルダーとして保存しております。 忍者ホームページにアップロードした画像ファイル名は一致しております 幾度試しましたが同じ状態です 下記はいま利用中のURLです宜しくお願いします。は間違って居りますでしょうか困って居ります http://qqai54.dousetsu.com/simpleVC_20110710164243.html ここはテーフルタグです。 <table align="right"> <tr><td><img src="img142.jpg"width="250" height="250"></td> <td><img src="img004.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#ffcccc">ハイブリットフリウス</td> <td bgcolor="#66cc66">フーガハイブリット</td></tr> <tr><td><img src="img013.jpg"width="250" height="250"></td> <td><img src="img889.jpg"width="250" height="250"></td></tr> <tr align="center"><td bgcolor="#cc9900">ポルシェカレラ</td> <td bgcolor="#9999cc">フェラリーモンディアル</td></tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- テーブルで画像を並べるときに・・
今ホームページをつくっていて 幅600pxのロゴ(jpg画像)の下に幅280px,80px,80px,80px,80px画像を並べています。 全部の画像をぴったりくっつけたいんですが、上のロゴと下の5つ並んだ画像の間に1pxくらいの隙間が出来てしまいます。 ソースは <table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/title.jpg" width="600" border="0"> </td> </tr> <tr> <td> <img src="img/1.jpg" width="280"height="35" border="0"> </td> <td> <img src="img/2.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/3.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/4.jpg" width="80" height="35" border="0"> </td> <td> <img src="img/5.jpg" width="80" height="35" border="0"> </td> </tr> </table> http://web-channel.com/index.html このホームページのようにしたいんですがどこを直したらいいんでしょうか？ 環境は、WinMEでエディタにタグ打ち込んで作ってます。
- ベストアンサー
- HTML
- 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
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- HTML
お礼
できました！ 本当に感謝しています。 ありがとうございました。