マウスオンで画像がかわる方法とは？
- テーブルの左セルにある「リンク１」のテキストにマウスをのせると、右のセルの中で異なる画像が表示される方法を教えてください。
- 同じ位置で画像が切り替わる方法についてはよく見かけますが、位置の変え方が分かりません。具体的な方法を教えてください。
- マウスオンで指定の位置で画像が切り替わる方法を教えてください。テーブルの左セルにある「リンク１」のテキストにマウスをのせると、右のセルの中で異なる画像が表示されるようにしたいです。
- ベストアンサー
マウスオンで指定の位置で画像がかわる
テーブルの左セルにある「リンク１」のテキストにマウスをのせると 右のセルの中でそれぞれ「リンク１」と「リンク2」では違う画像 （たとえば100*100ピクセルサイズのa.gifとb.gif）が表示されるJAVAを教えていただきたいのです。 同じ位置でかわるものはサンプルなどでたくさん見かけるのですが、 位置の変え方がわかりません。 よろしくお願いいたします。 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"><a href="1.htm">リンク１</a> <p><a href="2.htm">リンク2</a></td> <td width="200">ここに画像</td> </tr> </table>
- shizuku
- お礼率86% (353/409)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こういうことで良いのでしょうか？ （「同じ位置」とか「位置の変え方」という所がよく分らないのですが） ＊<head>部分 <script language="JavaScript"> <!-- img1=new Image(); img1.src="a.gif"; img2=new Image(); img2.src="b.gif"; function com(){ document.comarea.src="image0.gif" //始めに表示＆mouseoutで表示される画像 } function com1(){ document.comarea.src=img1.src; } function com2(){ document.comarea.src=img2.src; } //--> </script> ＊<table>部分 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"><a href="1.htm" onmouseover="com1()" onmouseout="com()">リンク１</a> <p><a href="2.htm" onmouseover="com2()" onmouseout="com()">リンク2</a></td> <td width="200"><img src="image0.gif" name="comarea"></td> </tr> </table> 試してないので、ちょっと心配ですが。。。(^^ゞ
関連するQ&A
- オブジェクトを指定してください、のエラーについて
HTML作業中、下記のようなエラーメッセージが表示されます。 エラー：オブジェクトを指定してください。 文字：3 コード：0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか？それと、 ライン：200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか？ メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック！" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif"> </td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>
- 締切済み
- HTML
- IEのテーブル表示の不具合でしょうか・・・？
IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 ２列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- 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
- tableにinclude fileを組み込んだら・・・
<table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> </td> </tr> </table> を <table cellspacing="0" cellpadding="0"> <tr> <td width="480"> <!--#include file="head.html"--> </td> </tr> </table> で head.html を <table width=470" cellspacing="0" cellpadding="0"> <tr> <td width="470">・・・・</td> </tr> </table> にした場合、中のtableの上下のスペースが異なってしまいます。 どなたか、解決方法を教えてください。
- ベストアンサー
- HTML
- ＨＴＭＬで画像を貼り付け
不明な点がありましたら補足要求かけてください。よろしくお願い致します。 自分のＨＰにリンク先の背景を乗せ、後付けでその背景の上に動画像（heart1とbanner）２タイプを左右端上貼りたいのです。 以下が背景タグでこれに画像を乗せたいのです。 （プライベートな部分は★に変えてあります。） <table width="390" border="0" cellpadding="3" cellspacing="0" bgcolor="#241C43" height="80"> <tr> <td width="19%" height="52"><a href="http://www.★.net/ring/index.htm" target="_top"> </a> <a href="http://www.★.net/ring/index.htm"><img src="heart1.gif" width="66" height="50" border="0"></a> </td> <td width="81%" height="52"> <div align="center"><a href="http://www.★.net/ring/index.htm"><img src="ring_banner.gif" width="306" height="35" border="0"></a><br> <font size="1"> <font color="#FFFFFF"> ★★</font></font> </div> </td> </tr> <tr> どうぞよろしくお願い致します。
- ベストアンサー
- ブログ
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- table内画像について
携帯サイトを作成しているのですが、下記の内容を記述したところ、上下の画像が2px程表示されませんでした。 test1.gifは画像下部分、test2.gifは画像上部分が表示されませんでした。 このような状態はどのような原因があるからでしょうか？ <table width="240" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="test1.gif"></td> </tr> <tr> <td bgcolor="#ffffcc"> テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト </td> </tr> <tr> <td><img src="test2.gif"></td> </tr> </td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
- ヤフオクのテンプレートでバックグラウンドを使いたい
今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>
- ベストアンサー
- オークション
お礼
ありがとうごさいました。 できました！ なんとお礼を申し上げていいのか・・・。 ずっーーと、ほかのホームページのスクリプトとかを見て やってたんですけど、全然わからなくて本当に困っていたんです。 これからやっとやりたいことが出来ます。 本当に早い回答をありがとうございました！！！