枠より大きな画像を部分的に表示する方法
- 縦1000px 横1000pxの画像を部分的に表示する方法について説明します。
- 画像は5×5の25枚の縦200px 横200pxの画像で構成されています。
- 指定した場所をクリックすると、対応する部分画像が表示されるスクリプトを作成する方法を教えてください。
- ベストアンサー
枠より大きな画像を部分的に表示javascript
縦1000px 横1000pxの画像(test.jpg)があり、この画像は、5×5で25枚の 縦200px 横200px の画像がつながって一枚となっています。 <img id="testplace"src="test.jpg" width="200px" height="200" /> と指定し（この時には、一番左上の200pxの画像が見えている）、その下に <a href="javascript:void(0)" onclick="testscript(0,0)">1番目</a> <a href="javascript:void(0)" onclick="testscript(0,200)">2番目</a> <a href="javascript:void(0)" onclick="testscript(0,400)">3番目</a> <a href="javascript:void(0)" onclick="testscript(0,600)">4番目</a> <a href="javascript:void(0)" onclick="testscript(0,800)">5番目</a> <a href="javascript:void(0)" onclick="testscript(200,0)">6番目</a> <a href="javascript:void(0)" onclick="testscript(200,200)">7番目</a> ・ ・ ・ <a href="javascript:void(0)" onclick="testscript(800,600)">24番目</a> <a href="javascript:void(0)" onclick="testscript(800,800)">25番目</a> とクリックする場所を設けて、それぞれをクリックすると、「testplace」に各々の200pxずつの画像が表示されるようにするスクリプト「testscript」を作成したいと考えています。 この方法だと画像は複数いらず1枚で済みます。CSSで背景画像を移動させる方法は使用しないで、実装できますでしょうか。 よろしくお願いいたします。
- tractor2
- お礼率92% (12/13)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
枠となるDIV要素を200×200で、position:relative;overflow:hidden; で用意しておいて、その中に1000×1000の画像を position:absolute; top:0px; left:0px;としてimg要素で配置しておき、 リンク（ボタンでもいいと思うけど）のクリックで、そのimg要素のstyle.topとstyle.leftを書き換えてやればよいと思う。
その他の回答 (2)
- reggaepunc
- ベストアンサー率59% (64/108)
ご指定の方法とは違う書き方ですが、書いてみましたー。 コピペで動くと思います。 firefox3.6では動いてましたー。 position:absolute;にして、 topプロパティとleftプロパティを変えて移動させました。 ---------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style> a { margin:0 10px 0 0; } </style> </head> <body> <div id="target"><img id="testplace" src="test.jpg"></div> <script> /* [ 1000 * 1000 ] */ function createBtnAndAction() { this.num = 25; var img = $('#testplace'); var width = img.width(); var height = img.height(); var i; var count = 1; var number = 1; var body = $('body'); var btn; var position = [ [0,0],[-200,0],[-400,0],[-600,0],[-800,0], [0,-200],[-200,-200],[-400,-200],[-600,-200],[-800,-200], [0,-400],[-200,-400],[-400,-400],[-600,-400],[-800,-400], [0,-600],[-200,-600],[-400,-600],[-600,-600],[-800,-600], [0,-800],[-200,-800],[-400,-800],[-600,-800],[-800,-800] ]; var testplace = $('#testplace'); // 動かす下準備 testplace.css({ position : 'absolute' }); // targetを隠すためにCSS設定！ $('#target').css({ width : width / 5, height : height / 5, overflow : 'hidden', position : 'relative' }); // ボタンを25個つくる！ for( i = 0; i < this.num; i++ ) { if( String( count ).length == 1 ) number = '0' + number; btn = $('<a href="#" rel="' + i + '">' + number + '</a>'); btn.click(function( e ) { var Y = position[ this.rel ][1]; var X = position[ this.rel ][0]; console.debug( ); testplace.animate({ top : Y + 'px', left : X + 'px' }, 400); e.preventDefault(); }); // 追加 body.append( btn ); if( count % 5 == 0 ) { body.append('<br>'); } number++; count++; } }; new createBtnAndAction(); </script> </body> </html>
お礼
画像の位置指定は、マイナスですね。 こちらもうっかりしていました。 少し自分にはレベルが高いですが、 こんなこともできるんだと、興味深く見ています。 視野を広げてくださったことにも、 ありがとうございます。
- reggaepunc
- ベストアンサー率59% (64/108)
確認ですが、 ><img id="testplace"src="test.jpg" width="200px" height="200" /> ↑こちらの記述だと画像が小さくなると思いますが（test.jpgは1000×1000pxですよね？） これは小さく表示された状態が正解なのでしょうか？ 小さく表示された状態が正解だとすると、画像の表示部分は、 40×40pxになると思いますが、ここまでは合ってますか？
補足
「 width="200px" height="200" 」の部分を 「 width="1000" height="1000" 」に訂正します。 ご指摘ありがとうございます。
関連するQ&A
- JavaScriptの画像入れ替えについて
下記のようなものでサムネイルをクリックすると大きな画面に表示される、みたいなものを作っています。しかし職場のIE6でクリックすると表示されなく大きな画像が消えてしまいます。 ちなみに自宅のIE６で確認したときは大丈夫だったのですが、、、 またサムネイル画像のアンカー部分のjavasscript:void(0);を消すと表示されるようになるのですが、やはりここのvoid0には問題があるのでしょうか？？ またサーバーにUPする前オンライン上ではなくPCで確認している時はちゃんと表示できていたました。 あまり詳しくないものでどなたかよろしくお願い致します。 <script type="text/javascript"> <!-- function imgch(url) { document.getElementById("image").src=url; } //--> </script> <style type="text/css"> img { border:none; } </style> </head> <body> <img src="image/2.jpg" width="500" height="500" id="image" /> <a href="javascript:void(0);"><img src="image/2.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> <a href="javascript:void(0);"><img src="image/3.jpg" width="50" height="50" onClick="imgch(this.src)" ></a> </body>
- ベストアンサー
- JavaScript
- PHPとJavaScriptで...
PHPで以下のようなリンクを生成し、 <form name="hoge" method="post"> <input type="hidden" name="hogehoge"> </form> <a href="javascript:void(0)" onClick="submit('0')">あ</a> <a href="javascript:void(0)" onClick="submit('1')">い</a> <a href="javascript:void(0)" onClick="submit('2')">う</a> <a href="javascript:void(0)" onClick="submit('3')">え</a> <a href="javascript:void(0)" onClick="submit('4')">お</a> POSTで受け取ったデータを再びPHPで使用したいのですが、 （同一ページ内で） 色々調べてみたのですが、いまいちわかりません。 JavaScriptの部分をどのようにしたらよいか、また根本的に間違っていたらどのように変えればよいか、 教えてください。 m(_ _)m
- ベストアンサー
- PHP
- javaScriptの記述方法
onclick="javaScript:opensub('pop.html')" のようにあるリンクをクリックしたらウィンドウが開くというのをしているのですが、↓ <input type="image" name="test01" alt="test01" src="test/tes01/01.jpg" onclick="javaScript:opensub('pop.html')"/> <a href="#">○○○○○○○</a> ↑のようなリンクに上記のようなonclick="javaScript:opensub('pop.html')" を記述しようと思ったらどのようにすればいいでしょうか？ すいませんがよろしくお願いいたします
- ベストアンサー
- HTML
- 文字サイズ変更のjavascriptが動かない
現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。 ページによって動かないので、何がいけないのかアドバイスお願いします！ 動くのは http://○○.jp/○○.html 動かないのは http://○○.jp/○○/○○.html のページです。 以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } else{ writeHtml +='<!-- --><li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><!--'; writeHtml +=' --><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li><!-- -->'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><!-- --><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><!-- --><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li><!-- --></ul> ******************************************** 画像は表示されるのですが、全く動きません。 よろしくお願いします！
- 締切済み
- JavaScript
- 画像の切り替え
教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の大きさにぴったり合った枠
<a href="images/画像.jpg" target="_blank">ここをクリック</a> これで、 「ここをクリック」をクリックして、表示される「画像.jpg」が 大きな白地の枠の左上に小さな画像が表示されます。 画像の大きさにぴったり合った枠で表示する方法は有りますか？
- ベストアンサー
- HTML
- JavaScriptでエレメントのIDを取得
JavaScriptで、エレメントのIDを取得する方法がわからず困っています。 [画像]ここをクリック [画像]ここをクリック 上記が画面配置のイメージなのですが、「ここをクリック」の文字をクリックした時に、そのクリックされた<a>タグのIDを取得したいのです。 以下が試行錯誤したソースの一部です。 [html] <img src="./test_01.gif" name="testImg01"> <a href="javascript" id="test_01" onclick="getID(this);">ここをクリック</> <img src="./test_02.gif" name="testImg02"> <a href="javascript" id="test_02" onclick="getID(this);">ここをクリック</a> [JavaScript] function getID(element) { var id = document.getElementById(id); alert(id); } 上記コードで得られたのは「null」という値でした。 色々検索してはいるのですが、思うように値を取得できません。 どうか知恵をお貸しください。
- ベストアンサー
- JavaScript
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- サムネイル画像の表示途中でそのサムネイル画像をクリックすると後から表示されるサムネイルが表示されない。
winXP PRO IE6.0SP1です。 とあるHPを作成していますが、サムネイル画像（約100画像）をクリックすると別ウィンドウが出る様にしています。 サムネイルが全部表示される前にクリックすると小窓が出て画像は表示されますが、そこから後に出るサムネイルが表示されずフリーズしてしまいます。 <a href="javascript:void(0);" onclick="window.open('./******/***.jpg','win1','width=400,height=400');" menubar=no toolbar=no locaction=no status=no><img src="./small/***.jpg" height=50 border=0></a> 他のPCで確認しても同じ状態です。 サムネイル画像が出ている途中でその画像をクリックしてもフリーズしない方法の解除方法はありますでしょうか？ 宜しくお願い致します。
- ベストアンサー
- HTML
- リンクをクリックして画像を切り替えるには？
下記のようなソースなのですが、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
お礼
DIV要素で枠を作っておいて、その中で画像を移動されればいいのですね。 おかげさまで解決できました。ありがとうございます。