スワップイメージ＋リンクの変更 その2
- 質問の目的は、テーブル内の画像とリンクを操作するJavaScriptの作成です。
- マウスオーバー時に画像がスワップされ、マウスが外れると元の画像に戻ります。
- リンクのスワップは不要です。
- ベストアンサー
スワップイメージ＋リンクの変更 その2
たびたび御世話になります。 以前、QNo.4078462で質問させていただいた者です。 http://oshiete1.goo.ne.jp/qa4078462.html 質問させていただいた問題は解決できたのですが、修正が必要となりました。 自分でなんとか解決してみようと試みたのですが、 少し時間が無いために改めて質問させてください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。このとき、 1. abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされる 2. abcからマウスを外すとhoge.jpgに戻る の2点を満たすjavascriptを御教授ください。 2. の条件がある分、以前と違ってリンクまでスワップされる必要はありません。
- bilateraria165
- お礼率51% (69/133)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg" id="m"></a></td> <td><a href="a.html"><img src="a.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg" onMouseOver="$('m').src=this.src" onMouseOut="$('m').src='hoge.jpg'"></a></td></tr> </table> <script> function $(o){return document.getElementById(o);} </script>
その他の回答 (2)
うんともすんともレスがないので、結局これか？ <html> <head> <script> window.onload=function(){ var im=document.images; im[1].onmouseout = function(){ this.src='a.jpg'; } im[2].onmouseout = function(){ this.src='b.jpg'; } im[3].onmouseout = function(){ this.src='c.jpg'; } im[1].onmouseover=function(){ document.images[0].src='a.jpg';} im[2].onmouseover=function(){ document.images[0].src='b.jpg';} im[3].onmouseover=function(){ document.images[0].src='c.jpg';} } </script> </head> <body> <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table>
お礼
レスが遅くなってしまい、申し訳ありません！ No.1での回答で教えていただいたものを採用することになったのち、 お礼をするのを失念しておりました。 ご教授いただき、大変ありがとうございました。
document.images[0].src="hoge.jpg"; 数値は、0かどうかはわかりませんが、適当に探してください！ 何番目の<img>イメージタグなのか・・・ 多分id="m"は省略できます
関連するQ&A
- スワップイメージ＋リンクの変更
まったくの素人ですが、お教えください。 以下のようなテーブルにそれぞれ画像とリンクをつけようとしています。 <table> <tr> <td rowspan="3"><a href="hoge.html"><img src="hoge.jpg"></a></td> <td><a href="a.html"><img src="a.jpg"></a></td> </tr> <tr><td><a href="b.html"><img src="b.jpg"></a></td></tr> <tr><td><a href="c.html"><img src="c.jpg"></a></td></tr> </table> a.jpg/b.jpg/c.jpg(以下、abc) がそれぞれメニューバーの項目で、 hoge.jpgを大きなメインの画面にしたいと思っています。 このとき、abcのいずれかをマウスオーバーするたびに、それぞれのイメージがhogeのエリアにスワップされ、かつそれぞれの項目のリンク(a.html/b.html/c.html)がhoge.htmlと置き換わるようなjavascriptを作りたいと考えています。 イメージのスワップだけならいくつも見つけることができたのですが、イメージとリンクが両方ともスワップされるようなものを、見つけることができませんでした。もしそのようなjavascriptがweb上にありましたら、お教えください。
- ベストアンサー
- JavaScript
- スワップイメージのフェード方法を教えてください
はじめまして。 スワップイメージを、あるサイトを参考に作ってみました。 それにフェードイン/フェードアウトを追加したいのですが、いろいろと試してみましたができません。 JavaScriptは全く分からず、困っています。 お助けください。お願いします。 ちなみに以下がスワップイメージのソースです。 image画面に表示する際、フェードイン/アウトを追加してもらえると助かります。 <HEAD> <script language="JavaScript"> <!-- Img = new Array() Img[0]="img/image1.jpg" Img[1]="img/image2.jpg" Img[2]="img/image3.jpg" AImgs = new Array() for (i=0 ; i<Img.length ; i++){ AImgs[i] = new Image() AImgs[i].src = Img[i] } function Swap(a,b){ a=a.name document.images[a].src = Img[b] } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD><IMG src="img/image1.jpg" name="image"></TD> </TR> <TR> <TD><A href="#" onmouseover="Swap(image,1)" onmouseout="Swap(image,0)"><img src="img/image2.jpg"></A></TD> <TD><A href="#" onmouseover="Swap(image,2)" onmouseout="Swap(image,0)"><img src="img/image3.jpg" ></A></TD> </TR> </TABLE> </BODY>
- ベストアンサー
- JavaScript
- 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
- ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>
- ベストアンサー
- ブログ
- スワップイメージでテキストがブラウザにより変わらない
java初心者ですが、サイトを参考にマウスオーバーで画像を変更、テキストも変更できるようになったのですが、IE、operaでは、テキストが変わるのですが、firefox、googleでは変わらないことに気が付きました。見よう見まねで組み込みましたので、詳細な理解ができておりません。宜しくお願い致します。 +--------------------------------+ | | | 画像 | | | +--------------------------------+ | テキスト | <=左記(A・B・C)の画像を +----------+----------+----------+ mouseoverで上記の画像 | A | B | C | とテキストが変わる +----------+----------+----------+ <head> <script type="text/javascript" src="../js/swap_gallery.js"></script> </head> <body> <table> <tr> <td><img src="A.jpg" name="pict" id="pict" /></td> </tr> <tr> <td id="pict_text">説明を表示します</td> </tr> <tr> <td> <table> <tr> <td><img src="A.jpg" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','A.jpg','pict','','A.jpg',1,'説明A')" onmouseout="" /></td> <td><img src="B.jpg" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','B.jpg','pict','','B.jpg',1,'説明B')" onmouseout="" /></td> <td><img src="C.jpg" alt="" name="btn" width="80" height="60" border="0" id="btn" onmouseover="chg_gallery('btn','','C.jpg','pict','','C.jpg',1,'説明C')" onmouseout="" /></td> </tr> </table> </td> </tr> </table> </body> function chg_gallery(a, b, c, d, e, f, g, cText){ swapImage(a,b,c,d,e,f,g); changeText(cText); } function swapImage() { var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=findObj(a[i]))!=null){ document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2]; } } function findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function changeText(cText) { if (document.all) { document.all["pict_text"].innerText = cText; } }
- 締切済み
- JavaScript
- 検索機能とページ送りのできるテーブルの作成について
お世話になります <input type="text" name="search" id="search"> <table width="800" border="0" id="item" name="item"> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td> <a href="hoge.html"> <img src="hoge.jpg"> </a> <b>ほげ</b> </td> </tr> <tr> <td> <a href="hogehoge.html"> <img src="hogehoge.jpg"> </a> <b>ほげほげ</b> </td> </tr> </tbody> </table> ※本来はTR要素がもっと沢山増えます。 このテーブルに対して表示件数が5件を超えたらページ送りができるようにし、テキストボックスの内容で検索をかけて表示をしたいのですが、何か良い解決案はありませんか？ 一応自分でもいろいろ調べて http://d.hatena.ne.jp/Rewish/20090703/1246615343 http://ponk.jp/?p=2413 を共存させるようとしてみたのですがどうもうまく動作しませんでした。
- 締切済み
- JavaScript
- リンクをクリックして画像を切り替えるには？
下記のようなソースなのですが、2枚目の画像に切り替わらず、表示されません。 何が悪いのでしょう？ <header内>-------------------------------------> <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4.jpg"; } function showimg2(){ document.area.src = "/jp/shop/i/popup_usbcalc/cg4_zoom.jpg"; } //--> </SCRIPT> -------------------------------------> <img src="cg4.jpg" alt="" name="area" /><br /> <table> <tbody> <tr> <td>[ <a href="javascript:void()" onclick="showimg1()">リンク1</a> ]</td> <td>[ <a href="javascript:void()" onclick="showimg2()">リンク2</a> ]</td> </tr> </tbody> </table>
- ベストアンサー
- JavaScript
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
- セルの背景画像の変更
リンクに触ると背景画像をp15.jpgに変更したいのですが よろしくお願いします。 <table> <tr><td>123</td> <td background="p10.jpg"><a hrf="abc.html">abc</A></td> <td>456</td> </tr></table>
- ベストアンサー
- JavaScript
- ホームページの<TABLE>の簡易的な方法について
ホームページ作成で写真をサムネールで表示し、クリックすると大きなサイズを表示する 簡便な方法について教えて下さい 今は、メモ帳で下記の様な記述を１枚１枚記入して作成しています これを、アプリで写真の配置で自動的に登録させるようなものがありますか？ 毎回ホームページを作成する都度行うのも大変なので・・・ 写真を大小用意しておいて、レイアウトにはめるだけでできる様なものがあると良いのですが なにかありませんでしょうか？ <TABLE> <TR> <Td>テスト</td> <Td>テスト</td> ・ ・ <Td>テスト</td> </TR> <TR> <TD><a href="2002\large02/（サイズ大）.jpg"><IMG src="2002/before/（サイズ小）.jpg"></a></td> <TD><a href="2002\large02/（サイズ大）.jpg"><IMG src="2002/before/（サイズ小）.jpg"></a></td> ・ ・ <Td><a href="2002\large02/（サイズ大）.jpg"><IMG src="2002/before/（サイズ小）.jpg"></a></td> </TR> </TABLE>
- ベストアンサー
- ブログ
お礼
ありがとうございます！ onMouseOver/onMouseOutのワザは存じ上げていました。 この記述でも十分動作には問題ないのですが、それをちょっと躊躇していたのは、hoge.jpgの指定などを直接imgタグの中に書き込まないといけないかな、と思っていたためです。 imgタグなどに入れるのはclassの指定くらいで、あとはヘッダにjavascriptを記述するだけ、みたいな書き方はやはり難しいでしょうか。。。