• 締切済み

オンマウスでの画像表示の位置指定について

以前、ここでオンマウスをしたときだけサムネイル画像を表示する方法を教えていただき大変助かりました。 ついては、その関連ですが、現在リスト(たて30行くらい、横10列くらい)の各行にマウスをおくことで各行の右側にサムネイルが表示されます。(行とは下記ソースの「○○○○(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の知識はありません) よろしくお願いします。

みんなの回答

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

表示する前にstyleのleftや、IDの名前から、別方向へ表示すべきだとなった場合にleftをいじったら良いんじゃないかな。

関連するQ&A

  • オンマウスで画像とテキストの指定位置表示について

    サムネイル画像にオンマウスにより、拡大画像が表示されるようにしています。 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> を記述してあります。 ----------------------- 書き加える部分について教えていただければと思います。 なお、サムネイルがたくさんあって縦長になると下に移動した場合、画像表示位置が上にかくれてしまうので、サムネイルの移動といっしょに表示位置が常に画面内に入るようにできるとなおいいのですが。 (現在はスクロールしない範囲内のサムネイル数にしています)

  • オンマウスで画像を別の場所に表示する

    過去ログで似たようなのがあったのですが、 全然わからなかったので、質問しました。 文字オンマウスで、画像を別の場所に表示したいのですが・・ (java~を使わなくてもよいやり方が知りたいです。 java~は使ったことがない初心者ですので。) ちなみに、画像オンマウスで文字を別の場所に表示するのは、 ↓このやり方(html)でできたんですが・・・ <span ID="msg">ここに表示される</span> <a href="ページURL"onMouseOver="msg.innerHTML='表示される文字'"onMouseOut="msg.innerHTML=''"><img src="画像URL" border="0"></a>

    • ベストアンサー
    • HTML
  • オンマウスでの拡大画像の位置指定

    サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか?ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか?どうかよろしくお願いします。 <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
  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか? お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • ロールオーバーで画像を先読みする方法

    スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか? お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }

  • jQuery datepickerを複数使いたい

    javascript で行を追加するDOMを作成しました。 最初の1回だけdatepickerで日付をクリックすると該当のテキストボックスに日付が問題なく代入されます。 追加ボタンをクリックで行を追加した際にもjQuery datepickerを動作させるにはどうしたら良いでしょうか? function add() { var objTBL = document.getElementById("request_tb" + num); if (!objTBL) return; var count = objTBL.rows.length; // 最終行に新しい行を追加 var row = objTBL.insertRow(count); // 列の追加 var c1 = row.insertCell(0); var c2 = row.insertCell(1); var c3 = row.insertCell(2); // 各列に表示内容を設定 c1.innerHTML = '<span class="seqno' + count +'">第' + count + '日時</span>'; c2.innerHTML = '<input type="text" name="date' + count + '" class="datepicker'+ count+'" id="datepicker">'; c3.innerHTML = '<img src="img.gif">&nbsp;カレンダーで選ぶ</a>'; $('datepicker'+count).datepicker({ numberOfMonths: 2, dateFormat: 'yy-mm-dd', changeYear: false, showButtonPanel: true, minDate:0 }); } <input type="button" id="add" onClick="add()" value="追加"> ご教授の程、宜しくお願いしますm(__)m

  • オンマウスで画像と文字を同時に任意の位置に表示したい

    絵を閲覧するページで以下のようにしたいです。 1.リンク文字の上にマウスを置く 2.任意の位置に『画像』とその画像の下に『文章』が同時に表示される  (何も記載されていない位置に表示されるようにしたいです) 3.マウスを離したら最後に表示したものが消えずにそのまま 画像だけ表示は一応できましたが、 文字と同時にというのはわかりませんでした。 それと何もないところに表示するのができませんでした。 以下、作ったソースです。 <SCRIPT TYPE="text/javascript"> <!-- if (document.images) { var img0 = new Image(); img0.src = "gallery/0.png"; var img1 = new Image(); img1.src = "gallery/1.png"; var img2 = new Image(); img2.src = "gallery/2.png"; } function On(name) { if (document.images) { document.images['def'].src = eval(name + '.src'); } } // --> </SCRIPT> <!-- ↓ここからBODY --> <Table Border="0" Cellspacing="0" align="center" Width="907" style="line-height:18px;"> <Tr><Td Valign="top"> <Table Border="0" Width="300" Cellspacing="0" style="line-height:18px;"> <Tr><Td ColSpan="2"><Font Size="2"> イラスト </Td></Tr> <Tr><Td Width="10"> </Td><Td><Font Size="2"> <A HREF="gallery/0.png" onMouseOver="On('img0')">作品1</A><BR> <A HREF="gallery/1.png" onMouseOver="On('img1')">作品2</A><BR> <A HREF="gallery/2.png" onMouseOver="On('img2')">作品3</A><BR> </Td></Tr> </Table> </Td> <Td Width="500" Valign="top"> <IMG SRC="" NAME="def"> </Td></Tr> </Table> <!-- ↑ここまでBODY --> 作品を追加していく形式のページなので、 なるべくシンプルなソースでお願いします。

  • 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか?

    複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか? ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。

  • イラストのボタンを押したときの画像の表示

    イラストをクリックしたとき、ボタンに応じた文章と画像を、同時にそれぞれ決まった場所に表示したいです。 表示する場所の設定と、文章のほうはなんとかできました。 ですが、画像の表示(入れ替え)がうまくいきません。 色々調べてみたのですが、方法はいろいろあったものの恥ずかしながら理解できませんでした。 下に該当する部分のコードを書きます。 どうか、アドバイスよろしくお願いします。版権を利用している部分は伏せます。 setumei  は文章を表示する部分 です。 setumei2 は画像を表示させる部分 にしたいです。 syoukai.png を gpikumin3.pngに画像を入れかえる部分がわかりません。 課題用であり、HP制作用のものではないです。 function button1(){ var div = document.getElementById('setumei'); div.innerHTML = "簡易説明"; div.style.background = "#ffffff";               div.style.border = "1px solid #000000";              var div = document.getElementById('setumei2');     ←わからない部分    dav.src = "gpikumin3.png"; div.style.background = "#ffffff"; div.style.border = "1px solid #000000"; <input type="image" onclick="button1()" src="mimin11.png" height="300" width="300"/> ↑クリックで文章と画像を表示させるイラスト型のボタン <div id="setumei"> 上記の1、2、3のイラストを押すと、簡易説明がここに表示されます。 </div> <div id="setumei2"><img src="syoukai.png"> ↑上が文章、下が画像の表示場所です。

  • NN4で、ある日時になったら画像を消したい

    先日、ある日時になったら画像を消す方法を教えて頂いたのですが、NN4でも動くように修正したいのですがどうすればいいかわかりません。 その時教えて頂いたソースは下記です。 function start(){ var limitTime="2006/04/10 11:50:30";//ある日時を設定して下さい。 var limitDate=new Date(limitTime); var nowDate=new Date(); defTime=limitDate-nowDate; if(defTime>0){ document.getElementById("img1").style.display="block"; document.getElementById("img2").style.display="block"; setTimeout("task()",defTime); }else{ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } } function task(){ document.getElementById("img1").style.display="none"; document.getElementById("img2").style.display="none"; } どうすれば動くようになるのか教えて頂けないでしょうか。 よろしくお願いします。

専門家に質問してみよう