オンマウスで画像とテキストの指定位置表示について
- オンマウスでサムネイル画像を拡大表示する際、画像の下にコメントを表示したいです。
- スクロールしない範囲内に表示されるサムネイル画像の位置に合わせて、拡大表示画像も常に表示されるようにしたいです。
- サムネイル画像にオンマウス時に拡大画像を表示する方法をカスタマイズして教えてください。
- ベストアンサー
オンマウスで画像とテキストの指定位置表示について
サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。 TABLEを使い左のTDにサムネイル羅列、右にオンマウス時の拡大画像表示です。 この拡大画像表示の際、画像の下または指定位置に「画像ごとのコメント」を表示したいのですが、当方scriptの知識がなくソースを借用しているためカスタマイズがわかりません。 <script type="text/javascript"> <!-- function over( name ) { var e = document.getElementById( "gazou" ); e.innerHTML = '<img src="' + name + '.JPG">'; e.style.position = "relative"; e.style.top = 000; e.style.left = 000; } function out() { var e = document.getElementById( "gazou" ); e.innerHTML = ''; } //--> </script> ------------------ ※画像（サムネイル表示部分） <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945');" onmouseout="out(light/img/DSC_1310);"> ※拡大画像表示部分に <span id="gazou"></span> を記述してあります。 ----------------------- 書き加える部分について教えていただければと思います。 なお、サムネイルがたくさんあって縦長になると下に移動した場合、画像表示位置が上にかくれてしまうので、サムネイルの移動といっしょに表示位置が常に画面内に入るようにできるとなおいいのですが。 （現在はスクロールしない範囲内のサムネイル数にしています）
- noro6857
- お礼率88% (526/596)
- JavaScript
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
こうですね。 <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置 } function out() { document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = ''; } //--> </script> <table> <tbody> <tr> <td width="150"><img src="light/img/DSC_0945_thumb.jpg" target="_top" onmouseover="over('light/img/DSC_0945','100枚のうちの001(DSC_0945.JPG)');" onmouseout="out();"><br> <img src="light/img/DSC_0953_thumb.jpg" target="_top" onmouseover="over('light/img/DSC_0953','100枚のうちの002(DSC_0953.JPG)');" onmouseout="out();"><br> </td> <td width="450" valign="top"> <table id="field"> <tbody> <tr> <td id="gazou"></td> </tr> <tr> <td id="comment" class="com"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> function over()内の4行目、 「***」は表示する画像サイズなどに合わせて任意の数値を入力してください。 document.getElementById("field").style.top=100+document.body.scrollTop; など。
その他の回答 (6)
- is_may
- ベストアンサー率65% (58/89)
もう解決しているかもしれませんが、サムネイルの横ではなく、スクロールしても毎回同じ位置に拡大画像を表示したいのであれば以下のような感じです。 document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置
お礼
ページエラーが出てしまったのでもう一度整理させてください。 <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=***+document.body.scrollTop;//イベントが発生したY位置 } function out() { var e = document.getElementById( "gazou" ); e.innerHTML = ''; } //--> </script> </HEAD> <BODY> <TABLE> <TR> <TD width=150> <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','100枚のうちの001(DSC_0945.JPG)');" onmouseout="out();"><br>//サムネイル１ <img src="light/img/DSC_0953_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0953','100枚のうちの002(DSC_0953.JPG)');" onmouseout="out();"><br>//サムネイル２ </TD> <TD width=450 valign="top"> <table id="field"> <tr><td id="gazou"></td></tr> <tr><td id="comment" class="com"></td></tr> </table> </TD> </TR> </TABLE> でいいでしょうか？
補足
そそっかしいですね。 scriptで***のままやってました。 これで、左TOPに常に表示できるようになりました。 本当にいろいろありがとうございました。
- is_may
- ベストアンサー率65% (58/89)
すみません、No.4の訂正です。 document.getElementById("field").style.top=event.y-***;//イベントが発生したY位置 ***に適当な数値を入れてください。 のプログラム部分を以下のように修正お願いします。 document.getElementById("field").style.top=event.y-***+document.body.scrollTop;//イベントが発生したY位置
お礼
締め切る予定でしたが、もうひとつアドバイスいただければとありがたいと思い厚かましく質問させていただきます。 しかし、よく考えたら、このスクロールは全画面スクロールを含めてホイールマウス利用者にはとても便利ですが、そうでない人には、サムネイルのオンマウスとスクロールバーを頻繁に移動させることがけっこう面倒な気がしました。 そこで、これに、オートスクロールをかけられないかご相談しました。 （オートスクロール開始・停止） スクロールをスタイルシートで入れる方法を検討中ですが、教えていただいたように次のようにしました。 （全画面スクロールだと上に見出しが常にほしいため） また、オンマウスのかわりにオンクリックにすることも簡単に変更できますでしょうか？ なお、ノーフレーム版単シートでの検討です。 <style type="text/css"> div.mini{ width:150; height:450; overflow-y:scroll; } </STYLE> <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 } function out() { var e = document.getElementById( "gazou" ); e.innerHTML = ''; } //--> </script> </head><body> <center> <TABLE BORDER=1> <TR> ※サムネイル部分 <TD width=150 align="center"> <br><br> <div class="mini"> <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','コメント');" onmouseout="out(light/img/DSC_0945;"><br><br> <img src="light/img/DSC_0953_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0953','コメント');" onmouseout="out(light/img/DSC_0953;"><br><br> <img src="light/img/DSC_0954_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0954','コメント');" onmouseout="out(light/img/DSC_0954;"><br><br> </div> </TD> ※表示部分 <TD align="center" width=500 valign=top style="padding-top:2em;"> <span id="comment"></span><br> <span id="gazou"></span> </TD> </TR> </TABLE>
- is_may
- ベストアンサー率65% (58/89)
>scriptを変更せずにcom.のかわりにspanにclassを指定することでスタイルシート指定すればいいのかなとも思いました。 この方法のほうが良いですね。 指定したサムネイルの横に表示する場合、まずテーブルなどを使って2つの<span>をひとまとめにし、id（今回は「field」）をつけます。（<span>の代わりに<td>にidをつけますが、別に<td>に<span>を入れても構いません。 <table>でまとめたら、<table>が入っている<td>（大きいテーブル）の垂直位置を上ぞろえにします。 <table>//大きいテーブル <tr> <td valign="top"> <table id="field"> <tr><td id="gazou"></td></tr> <tr><td id="comment" class="com"></td></tr> </table> ・・・ 次に表示する関数を以下のように変更します。 function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=event.y;//イベントが発生したY位置 } このまま実行すると恐らく相対位置していですので拡大画像が少しずれると思いますので、 document.getElementById("field").style.top=event.y-***;//イベントが発生したY位置 ***に適当な数値を入れてください。 ここまで書いて持論なんですが、ページ全体をスクロールするのではなく、サムネイルの長いリストをCSSの「overflow-y:scroll;」でスクロールにしてページ全体をスクロールしなくした方が良いような気がします。あくまで持論ですので今回は詳しくは書かないでおきます。
お礼
書く場所を間違えて補足に書いてしまいました。
補足
いろいろ勉強させてもらってます。 ただ、表示位置の固定は、あまり理解できなくてうまくできてません。 すみません。 （左に表示するサムネイルの記述位置がわからず、 大きいテーブルの中の左テーブルが縦長のサムネイル、右が教えていただいた表示部分の記述ということ？） もう少し研究してみます。 それで教えてくださったoverflow-y:scrollを試してみました。 このほうが画像位置がぶれずにいいかもしれませんね。
- is_may
- ベストアンサー率65% (58/89)
No.2のプログラムは正しくは <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 } function out() { document.getElementById( "gazou" ).innerHTML = document.getElementById( "comment" ).innerHTML= ''; } //--> </script> こうでしたね＾＾；2つの<span>をテーブルなどに配置すればJavaScriptが分からなくでも編集しやすいかと思います。 コメントの文字修飾を変更したい場合は上記ソースの document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 を document.getElementById( "comment" ).innerHTML = "<span class='com'>" + comm + "</span>";//コメントを表示 に変更して、スタイルシートで .com { font-size:12pt; color:#333; font-family:Verdana,Arial,Helvetica; } このように記述すれば表示するコメントの文字修飾を自由に変更できます。
お礼
フォント指定について、その後試行錯誤して試してみましたが <span id="gazou"></span> <span にフォントでstyle="color:#ff0000"などを入れてみたら、実現できました。ということは、scriptを変更せずにcom.のかわりにspanにclassを指定することでスタイルシート指定すればいいのかなとも思いました。 あと初期の質問にも書きましたが、たてにスクロールしても常に拡大画像が画面内（指定サムネイルの横）に表示できる方法なんてありますか。 たぶん今までのだと、表示位置固定のようなので、スクロールすると隠れてしまうと思います。
- is_may
- ベストアンサー率65% (58/89)
コメントを画像の上に配置する場合は function over( name , comm ) { var e = document.getElementById( "gazou" ); e.innerHTML = comm + '<br><img src="' + name + '.JPG">'; } こんな感じですね。 パラメーターは別に好きな名前で結構です。画像・コメントを表示する<span>を分けたい場合はこんな感じです。 <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm';//コメントを表示 e.style.position = "relative"; e.style.top = 000; e.style.left = 000; } function out() { document.getElementById( "gazou" ).innerHTML = document.getElementById( "comment" ).innerHTML= ''; } //--> </script> </head> <body> <span id="gazou"></span>…画像を表示 <span id="comment"></span>…コメントを表示
お礼
丁寧に書いていただき、思ってたような表示をすることができました。 ありがとうございました。 ついでですみませんが、このコメントの文字部分をフォント指定をすることができますか。（色とかサイズとか） なお、他の部分にはスタイルシートなどで別のフォント指定がしてあるものとします。
- is_may
- ベストアンサー率65% (58/89)
サムネイル画像のonmouseoverの引数に新たにコメントを以下のように追加して、 <img src="light/img/DSC_0945_thumb.jpg" target=_top onmouseover="over('light/img/DSC_0945','ここに各コメントを入力');" onmouseout="out();"> <span>に画像を代入するときに一緒に説明文も代入する、あるいはもうひとつ違う<span>を設置してそこに説明文を表示してみてはいかがでしょう？ function over( name , comm ) { var e = document.getElementById( "gazou" ); e.innerHTML = '<img src="' + name + '.JPG"><br>' + comm;//説明文も一緒に出力 }
お礼
ありがとうございました。 一応表示できるようになりました。 コメントを上にもってこようとして over('ここにコメント','light/img/DSC_0945') ってやったら、これではだめなんですね（苦笑） あと、もうひとつの<span>というのはgazouでないものだとしたら、 バラメーターをどのようにするのでしょうか
関連するQ&A
- オンマウスでの画像表示の位置指定について
以前、ここでオンマウスをしたときだけサムネイル画像を表示する方法を教えていただき大変助かりました。 ついては、その関連ですが、現在リスト（たて３０行くらい、横１０列くらい）の各行にマウスをおくことで各行の右側にサムネイルが表示されます。（行とは下記ソースの「○○○○(04.9.18)」にあたります。） ところが右端の列は、画面ぎりぎりのためこの列だけ行の左側にサムネイルを表示させたいのです。 教えていただいたソースは <script type="text/javascript"> function over( img,area ) { var e = document.getElementById( area ); e.innerHTML = '<img src="'+img+'">'; e.style.position = "absolute"; e.style.border = "solid #c0c0c0"; return area; } function out(area) { var e = document.getElementById( area ); e.innerHTML = ''; e.style.border = "none"; } </script> （表示部分） <A href="index.htm#040918" target=_top onmouseover="area=over('test/img/IMGP4995_thumb.jpg','area002');" onmouseout="out(area);">○○○○(04.9.18)</A><span id="area002"></span> 以下idを変えて繰り返し お教えいただけるとありがたいです。 （当方javascriptの知識はありません） よろしくお願いします。
- 締切済み
- JavaScript
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- オンマウスでサムネイル画像のコマ間余白設定について
サムネイル画像にオンマウスにより、拡大画像が表示されるページを作っています。 htmlは勉強中なのですがjavascriptの知識がなくソースを借用しているためカスタマイズ方法がわからずに作業が中断している状態です。 タテに並んでいるサムネイル同士の間に5pxほどの隙間を設けたいのですが、どのようにソースを修正すればよろしいのか、どなたか教えていただけると助かります。 よろしくお願いいたします。 サムネイル画像はsamフォルダに、メイン画像はmainフォルダに入れています。 ページソースを貼り付けておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK href="style.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <center> <table width="710" cellpadding="0" cellspacing="0"> <tbody> <tr> <td bgcolor="#0000ff" height="50" align="center"><b><font color="#ffffff" size="4">メインタイトル</font></b></td> </tr> <tr> <td bgcolor="#0000ff"><font color="#00ffff" size="2"> ↓のサムネイル画像にマウスポインタを合わせて下さい</font></td> </tr> </tbody> </table> </center> <center> <script type="text/javascript"> <!-- function over( name , comm ) { document.getElementById( "gazou" ).innerHTML = '<img src="' + name + '.JPG">';//画像を表示 document.getElementById( "comment" ).innerHTML = comm;//コメントを表示 document.getElementById("field").style.position="relative";//CSSの相対位置指定 document.getElementById("field").style.top=0+document.body.scrollTop;//イベントが発生したY位置 } function out() { document.getElementById( "gazou" ).innerHTML =document.getElementById( "comment" ).innerHTML = ''; } //--> </script> <table> <tbody> <tr> <td width="100"> <img src="sum/001.jpg" target="_top" onmouseover="over('main/001','');" onmouseout="out();"><br> <img src="sum/002.jpg" target="_top" onmouseover="over('main/002','');" onmouseout="out();"><br> <img src="sum/003.jpg" target="_top" onmouseover="over('main/003','');" onmouseout="out();"><br> <img src="sum/004.jpg" target="_top" onmouseover="over('main/004','');" onmouseout="out();"><br> <img src="sum/005.jpg" target="_top" onmouseover="over('main/005','');" onmouseout="out();"><br> </td> <td valign="top" width="600"> <table id="field"> <tbody> <tr> <td id="gazou"></td> </tr> <tr> <td id="comment" class="com"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </center> </body> </html>
- ベストアンサー
- JavaScript
- サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について
お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述４の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述１+２+３と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか？ ■記述１(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述２(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述３(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述４(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ |￣￣￣￣￣￣￣| | 拡大画像 | |＿＿＿＿＿＿＿| |￣||￣||￣||￣| |＿||＿||＿||＿|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- html オンマウスで変化する画像の位置の指定方法
よくHPなどで使われるオンマウスによって変化する画像。 私は今その変化する画像の位置を指定のに苦労しています。 画像が添付してあると思われます。 今現在こういった感じになっています。 緑・・・オンマウス位置 赤・・・オンマウスによる画像表示位置 青・・・現在のオンマウス位置 黄・・・現在のオンマウスによる画像表示位置 私はこの青、黄を緑、赤の場所まで移動させたいと思っています。 http://copicopi.com/onmousepic.html こちらのサイトのオンマウス画像4を参考にしています。 また、たまに表示される画像が激しく点滅する事もあります。 どういった風に書き換えれば位置を綺麗に指定する事ができるのでしょうか。 教えて頂けると幸いです。
- ベストアンサー
- HTML
- オンマウスで画像を別の場所に表示する
過去ログで似たようなのがあったのですが、 全然わからなかったので、質問しました。 文字オンマウスで、画像を別の場所に表示したいのですが・・ (java～を使わなくてもよいやり方が知りたいです。 java～は使ったことがない初心者ですので。) ちなみに、画像オンマウスで文字を別の場所に表示するのは、 ↓このやり方(html)でできたんですが・・・ <span ID="msg">ここに表示される</span> <a href="ページＵＲＬ"onMouseOver="msg.innerHTML='表示される文字'"onMouseOut="msg.innerHTML=''"><img src="画像ＵＲＬ" border="0"></a>
- ベストアンサー
- HTML
- オンマウスでボックス表示を中央に表示
この下のスクリプトで画像にカーソルがオンマウスになるとその下に ボックスが表示されるという構造なのですが、色々試したのですが、 ブラウザの解像度、１２８０、１０２８、８００などでもこのオンマウスで表示されるボックスが中央にくるようにしたいのです。 レイアウトを統一するためです。 function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.clientWidth/4; set.style.posTop =document.body.clientHeight; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} という構文なのですが、この上のものですと１０２８では中央にくるのですが、自宅のワイドモニターですとずれてしまいます。 となたか、どんなモニターでもどんな解像度でもこのボックスをいつも中央に表示をするスクリプトを教えていただけないでしょうか。。。 自分でも勉強しているのですが、なかなか上手くいかなく困っています。どうか宜しくお願いいたします。
- 締切済み
- JavaScript
- オンマウスで/オンクリックでの、フレーム越えの画像変更
困っています。 フレームを使ったページで 例えば、左のフレームに写真のサムネイルを表示し、 オンマウス、もしくはオンクリックで、 右のフレームに大きな画像とテキストを表示したいのですが、 フレーム越えができません。 今は、左フレームに <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> と、ＨＴＭＬでやってます。 ぜひ、改善策を教えてください。お願いします。
- ベストアンサー
- HTML
- 小さい画像にマウスを合わせると小さい画像の右上（右下）に拡大画像が表示される
ホームページ作成で教えて欲しいのですが、小さなマンションのサムネイル画像の上にマウスを持って行くと、大きな画像がサムネイル画像の右下か右上に表示されるような仕組みを作りたいのですが、どのようにしたらいいのでしょうか？ヤフー不動産などで実際にあるのですが、小さな間取り図にオンマウスで拡大間取りが見れるようにしたいのです。 javaスクリプトで作成しているのでしょうか？javaは当方分からないのですが、アドバイスをお願い致します。
- 締切済み
- Windows XP
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
お礼
長時間にわたりご親切に対応してくださりありがとうございました。 いくつかのパターンの知識を得ることができましたので、早速活用させていただきます。 なお、関連で「オンクリック」による方法を別スレでもうひとつ質問しますので、目にとまりましたらよろしくお願いします。 こちらは締め切らせていただきます。 ありがとうございました。