- 締切済み
別フレームのロールオーバー
別画面のロールオーバーの質問で、 document.FRAME名.Image[0].src = 'file.jpg'; というタグを使うのは分るのですが、 ホームページビルダーのソフトの仕様か、未だ出来ずにいます。 /////////////////////////////////////////////////////////// フレームは以下の構造になっています。 ●A.html にインラインフレームを二つ配置 ・フレーム1＝B.html 解説画像表示 ・フレーム2＝C.html サムネイル画像配置 フレーム2にサムネイル画像を配置して、 フレーム1にロールオーバーで解説画像を入れる こんなことをしたいです。 フレーム1,2それぞれどのようなタグ記載で実現できるでしょうか？ フレームを二つ収納しているA.htmlの関連はありますか？
- hi-Roki
- お礼率38% (10/26)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
B.htmlの0番目要素のsrcを変えたいのか、それとも B.htmlをべつのhtmlに切り替えたいのかによって 書き方がちがいうでしょう。 それとImage[0]はImages[0]のような・・・
関連するQ&A
- ロールオーバーとOnclickで
A href="javascript:;"target="_top" onclick="MM_nbGroup('down','group1','～.gif','detail','～.jpg',1)" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');"><IMG src="～.gif" width="51" height="50" border="0" name="_HPB_ROLLOVER1"></A> 上のようにホームページビルダーを使って、ロールオーバーでサムネイルと大きな画像が切り替わるようにしています。 しかしサムネイルをクリックしたら、他のサムネイルをクリックするまで大きい画像が固定される方法がイマイチわかりません。 分かる方いらっしゃいましたら教えて下さい。 あまり詳しくなくて旨く説明できずにすみません。 http://irving.jp/rwr/discography.html のような 感じにしたいんです。
- 締切済み
- JavaScript
- 画像のロールオーバーがずれてしまいます。（CSS）
テーブルを作り、tdタグの一箇所の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にtd内にあるimg要素にvisibility:hidden;にするというロールオーバーを作りたいと思っています。 しかし実際に作ってブラウザで見てみると、ロールオーバー後の画像 （背景として設定しているもの）が微妙に１pxほど斜め下にずれて表示されてしまいます。 このような事を防ぐためにはどんな事に気を付ければ良いでしょうか？ ちなみに、ロールオーバー前の画像とロールオーバー後の画像２枚を 全く同じサイズにしています。 参考までにタグを下記に記述していますので、どなたか見て頂けませんでしょうか。宜しくお願いいたします。 -------------------------------------------------CSS td.1{ background:url(image01.jpg) no-repeat; } td.1 a{ display:block; } td.1 a:hover{ background-color:transparent; } td.1 a:hover img{ visibility:hidden; } -------------------------------------------------HTML <table> <tr> <td class="1"> ←このtd内の画像 <a href="top.html"><img src="image01.jpg"></a> </td> <td> <a href="top02.html"><img src="image02.jpg"></a> </td> <td> <a href="top03.html"><img src="image03.jpg"></a> </td> </tr> </table>
- ベストアンサー
- その他([技術者向] コンピューター)
- 別のフレームに画像を表示させる
検索をかけてみたのですが、同じ質問は見付からず 似た(？)ような質問の回答では理解出来ないので どなたかご存知の方が居ましたらお願い致します マウスを乗せた時、他の画像を表示させたり、画像に効果をつける ロールオーバーという機能の仲間なのではないかと思うのですが 「マウスを乗せた時、別のフレームに画像を表示させる」事は可能なのでしょうか？ フレームを上下に分けて、上は写真のサムネイルで そのサムネイルにマウスを乗せた時に 下のフレームに大きめの、サムネイルとは別の画像を表示させたいのですが やり方が判りません。 ロールオーバーも使った事がなかったのですが やってみたら(基本の効果は)、そこそこ理解出来ました。 フレームも最近覚えた初心者ですので、スクリプトも良く判りません (作られたソースを貼る位しか出来ません・・・・) 宜しくお願い致します
- ベストアンサー
- JavaScript
- jQuery、画像を2箇所同時にロールオーバー
こんばんは。お世話になります。 jQueryを使ったJSについての質問です。 div.colにカーソルを合わせた時に、div内の画像2つを 同時にそれぞれロールオーバーさせたいです。 <div class="col"> <img src="image01.jpg"> <img src="image02.jpg"> </div> <div class="col"> <img src="image03.jpg"> <img src="image04.jpg"> </div> ・ ・ ・ オンマウス用の画像は、 image01.jpg→image01_on.jpg image02.jpg→image02_on.jpg という風に、すべて統一で「_on」を付けてあります。 画像自体をオンマウスするとロールオーバーするJSはよく見るのですが、 それらを格納しているdivをオンマウスした時に画像をロールオーバーさせる方法を 見つけられませんでした。 何か解決策がありましたら、お力をお貸しいただきたいです。 お手数ではありますが、何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
- フレーム内に画像を表示する際、画像をフレームサイズに合わせたい。
Webページで、フレームを使ってるんですが、フレーム内に表示する画像のサイズがマチマチで(画像の元サイズがとても大きかったりして)見栄えが良くありません。 main.htmlというソースを置いて、そこからタイトル表示用HTMLと画像リスト用HTMLをフレーム内に表示。 画像リスト用HTMLからAタグで画像表示用フレームに画像を表示するよう記述。 単にこれだけだと、ブラウザごとに画像サイズがフレーム内に収まるよう調整されたり、されなかったりなんですよ。 どうにか、強制的にフレーム内に表示させるようにする方法を教えてください。 ------------------------------------------------- main.htmlの抜粋↓ ------------------------------------------------- <frameset rows="50,*"> <form name="frm1"> <frame src="title.html" name="ue"> <frameset cols="187,*"> <frame src="list.html" name="hidari"> <frame src="./img/1.jpg" name="migi"> </frameset> </form> </frameset> ------------------------------------------------- list.htmlの抜粋↓ ------------------------------------------------- <a href="img/2.jpg" target="migi">19</a>
- 締切済み
- HTML
- ロールオーバー？？？？？
java初心者につきご迷惑お掛けします。 実は↓のような機能をホームページに付けたいのですが、上手くいかず悩んでいます。 ロールオーバーと呼ぶのでしょうか？ 大きなメイン画像が1つあり、隣に小さなサブ画像が数個並んでいて、そのそれぞれのサブ画像にカーソルを持っていくと、メイン画像がそのサブ画面の画像に切り替わっていくというものです。 更には、その1セット（メイン画像×1、サブ画像数個）を、上から下へと複数設置したいと考えております。 web上で見つけた↓ソースを使って試したのですが、単独の場合は上手くいくのですが、複数を設置すると、どの部分のサブ画像を押しても、最後に設置した部分のメイン画像が変わるだけで、後はまったくの機能しません。 それぞれがきちんと機能するようにしたいのですが、どのようにすればよいでしょうか？ <script language="JavaScript"> <!-- function change(fname){ document.images['CHANGE'].src=fname; } function restore(){ document.images['CHANGE'].src="メイン画像.jpg"; } //--> </script> <img name="CHANGE" img src="メイン画像.jpg"><br> <span onmouseover="change('サブ画像1.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像1.jpg"></span> <span onmouseover="change('サブ画像2.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像2.jpg"></span> <span onmouseover="change('サブ画像3.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像3.jpg"></span> <span onmouseover="change('サブ画像4.jpg')" onmouseout="restore()" style="color:red;text-decoration:underline"><img src="サブ画像4.jpg"></span>
- ベストアンサー
- JavaScript
- 画像のロールオーバー
画像のロールオーバーで下記のスクリプトを教えてもらいました。 画像aをマウスオーバーで画像a2に変わる クリックでオーバーした状態を保持（画像a2のまま） さらに、画像bをマウスオーバーで画像b2に変わり クリックでオーバーした状態を保持（画像b2のまま） そのクリック時、画像a2が画像aに変わる 実装できたのですが。 下記のソース２つテーブルが１つのhtml上にあり a～fまでg～iまで画像が分かれていて a～fをクリックし画像が変わった後 g～iをクリックするとa～fの画像が変わらないようにしたいのです。 二つのテーブルの画像を別々に考えたいのですが、できますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> <!-- img.group {width: 111px; height:50px;} --> </style> <script type="text/javascript"><!-- var img=['a.jpg,a2.jpg','b.jpg,b2.jpg','c.jpg,c2.jpg','d.jpg,d2.jpg','e.jpg,e2.jpg','f.jpg,f2.jpg','g.jpg,g2.jpg','h.jpg,h2.jpg','i.jpg,i2.jpg']; var elm=[]; var o_idx=-1; window.onload=function(){ var e=document.getElementsByTagName('IMG'); for (var i=0,j=0; i<e.length; i++) if (e[i].className=='group1') elm[j++]=e[i]; for (i=0; i<elm.length; i++){ elm[i].onmouseover=change(i,1); elm[i].onmouseout=change(i,0); elm[i].onclick=change(i,2); } } function change(idx,n){ return function(){ if (n > 1){ if (o_idx > -1) elm[o_idx].src=img[o_idx].split(',')[0]; elm[idx].src=img[idx].split(',')[1]; o_idx=idx; } else { if (idx != o_idx) elm[idx].src=img[idx].split(',')[n]; } };} // --></script> </head> <body> <table width="676" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="a.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="b.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="c.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="d.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="e.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="f.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> <br> <table width="333" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="111"><img src="g.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="h.jpg" width="111" height="50" border="0" class="group1"></td> <td width="2"></td> <td width="111"><img src="i.jpg" width="111" height="50" border="0" class="group1"></td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- ロールオーバーリンクタグとフレームについて
ホームページを改装しているのですが… ロールオーバーリンクタグでメニューのボタンを使おうと思うのですが、このままだと押すと左のメニューの方にリンクしたページが出てしまうのでフレームの右側に表示できるようにしたいのですが… <A href="アドレス"><img src="元の画像" border="0" onMouseOver="this .src='ポイント時の画像'"onMouseOut="this .src='元の画像'"></A> このタグをフレーム向き（？）にするにはどうしたらよいでしょう； いろいろいじってみたのですがタグの仕組みがわからないのでできませんorz 何方か分かる方いらっしゃれば教えていただきたいです（；；）
- ベストアンサー
- その他([技術者向] コンピューター)
- 疑似フレーム（CSS使用）のタグについて
画像の様な感じにタグを組みたいのですがインラインフレームの高さが100％にできません。フレームでやるとなると背景画像をフレームを超えて表示できないので出来る限り疑似フレームでやりたいのですがどうすれば上手くいくでしょうか。
- 締切済み
- CSS
補足
ご連絡ありがとうございます。 B.html の解説画面の役目ですが、 Bがキャンパス部分になり、そのスペースで画像を切り替えるようにしたい感じです。 B.html サムネイル(1)、サムネイル(2)、サムネイル(3) ↓ ↓ ↓ C.html 解説(1) 解説(2) 解説(3) 解説画像はGIF,JPEGを予定しています。