縦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で背景画像を移動させる方法は使用しないで、実装できますでしょうか。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

枠となるDIV要素を200×200で、position:relative;overflow:hidden;


で用意しておいて、その中に1000×1000の画像を position:absolute; top:0px; left:0px;としてimg要素で配置しておき、
リンク(ボタンでもいいと思うけど)のクリックで、そのimg要素のstyle.topとstyle.leftを書き換えてやればよいと思う。
    • good
    • 0
この回答へのお礼

DIV要素で枠を作っておいて、その中で画像を移動されればいいのですね。
おかげさまで解決できました。ありがとうございます。

お礼日時:2011/04/28 17:48

ご指定の方法とは違う書き方ですが、書いてみましたー。


コピペで動くと思います。
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/ …
<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>
    • good
    • 0
この回答へのお礼

画像の位置指定は、マイナスですね。
こちらもうっかりしていました。

少し自分にはレベルが高いですが、
こんなこともできるんだと、興味深く見ています。
視野を広げてくださったことにも、
ありがとうございます。

お礼日時:2011/04/28 17:57

確認ですが、


><img id="testplace"src="test.jpg" width="200px" height="200" />
↑こちらの記述だと画像が小さくなると思いますが(test.jpgは1000×1000pxですよね?)
これは小さく表示された状態が正解なのでしょうか?
小さく表示された状態が正解だとすると、画像の表示部分は、
40×40pxになると思いますが、ここまでは合ってますか?

この回答への補足

「 width="200px" height="200" 」の部分を
「 width="1000" height="1000" 」に訂正します。
ご指摘ありがとうございます。

補足日時:2011/04/21 15:39
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

QJavaScript:縦並びのブログパーツを横並びに

http://youlist.jp/list_y?tag=%E3%83%86%E3%82%B9%E3%83%88&user_id=&type=youlist

↑ここにある縦並びになっているyoutube動画のオブジェクトを横並びに変えることは可能でしょうか?

よろしくお願いいたします。

Aベストアンサー

ソースコードを変えるのでは無理です。
変わりにこのようなソースコードを書くのはどうでしょう。
まず画像5枚ををネットにアップロードし、

<a href="http://jp.youtube.com/watch?v=qxibKzuN_ow&eurl=http://youlist.jp/v/qxibKzuN_ow"><image src=" ※を見て下さい "></a>
<a href="http://jp.youtube.com/watch?v=-ul9f_euMlQ&eurl=http://youlist.jp/v/-ul9f_euMlQ"><image src=" ※ "></a>
<a href="http://jp.youtube.com/watch?v=NdWlOqQTRys&eurl=http://youlist.jp/v/NdWlOqQTRys"><image src=" ※ "></a>
<a href="http://jp.youtube.com/watch?v=TGrMNvHQZxI&eurl=http://youlist.jp/v/TGrMNvHQZxI"><image src=" ※ "></a>
<a href="http://jp.youtube.com/watch?v=S4L-Lwr2Vd4&eurl=http://youlist.jp/v/S4L-Lwr2Vd4"><image src=" ※ "></a>

を貼り付けてください。BIGLOBE相談室の機能でリンクが張られていますが、無視してください。
「※」の所には※ではなく、画像(上から順番に)のパスが入ります。
早退パスでも絶対パスでもかまいません。パスというのは、ネットの上のバーに表示される「http://~」見たいなやつです。
参考になれば。

ソースコードを変えるのでは無理です。
変わりにこのようなソースコードを書くのはどうでしょう。
まず画像5枚ををネットにアップロードし、

<a href="http://jp.youtube.com/watch?v=qxibKzuN_ow&eurl=http://youlist.jp/v/qxibKzuN_ow"><image src=" ※を見て下さい "></a>
<a href="http://jp.youtube.com/watch?v=-ul9f_euMlQ&eurl=http://youlist.jp/v/-ul9f_euMlQ"><image src=" ※ "></a>
<a href="http://jp.youtube.com/watch?v=NdWlOqQTRys&eurl=http://youlist.jp/v/NdWlOqQTRys"><image src=" ※...続きを読む

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

QJavaScriptで画像を横移動

JavaScriptを使って画像を横移動させたいと思っています。

イメージとしてはこちらのサイトにある動きそのままなのですが、
http://www.wind.sannet.ne.jp/alfix/javascript/img/2.html

<BODY onLoad="moveImgX()">を使わずに、
<HEAD>~</HEAD>内への記述と、
<IMG~>の記述だけで実行されるようなものが理想です。

ご教授お願い致します。

Aベストアンサー

一番簡単な方法としては、

bodyタグ内のonload="~"を消して、suctiptタグ内の最後にでも
 window.onload = moveImgX;
の1行を追加しておく。
(全角空白は半角に)


対象のidとか移動する位置などは、表示内容に応じた調整が必要でしょう。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

Q横に書いてある文を縦に表示。

これは知っている方がいらしゃれば聞きたいのですが、何かボタンを押すことで、横に書いてあった文章が縦に表示させるということは可能なのでしょうか(ページに表示されているすべての文字に対して)??
これはどこの参考書を見てもないのでほぼあきらめてるのですが、わかる方がいらっしゃればぜひサンプルなどを教えていただきたいです。お願いします。 m(_ _)m

Aベストアンサー

> もしわかればでいいのですが、この内容をプルダウンみたいな感じでえらべるようにはできるのでしょうか?

こんな感じ。

<select onchange='document.all("area").style.writingMode = this.options[this.selectedIndex].value'>
<option value='tb-rl'>縦書き
<option value=''>横書き
</select>
<p>
<span id=area style='writing-mode:tb-rl'>
対象となる文章
</span>

# まとめ過ぎちゃって、見づらい?

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Q(javascript)HTMLで指定した画像パスに画像ファイルがない

(javascript)HTMLで指定した画像パスに画像ファイルがない場合、別のファイル名の画像に差し替える方法が知りたいです。

以下のようにimgフォルダ内にある画像ファイル名をPHPでゲットしているのですが、その画像ファイルがない場合、確実にimgフォルダ内に存在する画像ファイルと差し替えたいのです。

print("<img src=img/". $item->getImage(). "border=0>\n");

<img src=img/cat.jpg border=0>が存在しないなら、<img src=img/dog.jpg border=0>を表示する。

javascript等、解決する方法がありますか?
ご教授お願いします。
よろしくお願いします。<(_ _)>

Aベストアンサー

<script type="text/javascript">
function DefaultImg(){
document.getElementById("IMG").src="dog.jpg";
}
</script>

<img id="IMG" src="cat.jpg" onerror="DefaultImg()">

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

QIE6でmax-width:100px; max-height:100pxを実現にするには

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/software/js/minmax.html
ただしこれらの使用方法に従って記載しても、max-width:100px; height:100px(縦長の画像は100px×100pxに)またはwidth:100px; max-height:100px(横長の画像は100px×100pxに)となってしまいます。
Java Script、CSS、または両方を使って解決できる方法がありましたら教えていただけませんでしょうか。
よろしくお願いいたします。

BLOGでエントリーから画像だけを読み出しサムネイルを集めたhttp://www.photocase.com/photobrowser.aspのようなページを作ろうと考えています。
画像の大きさはまちまちなのでmax-width:100px; max-height:100pxとしました。
しかしmax/min-height/widthはIE6に対応しません。
そこで▼以下の2つを試してみました。
・max-width in Internet Explorer(IE独自のexpressionを利用)
 http://www.svendtofte.com/code/max_width_in_ie/
・minmax.js module(Java Scriptを利用)
 http://doxdesk.com/soft...続きを読む

Aベストアンサー

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(img) {
/* 一旦縦横とも"auto"にして実寸を取得。長い方を"100px"に再設定。そして表示。 */
img.style.width = "auto";
img.style.height = "auto";
if (img.width > img.height) {
if (img.width > 100) img.style.width = "100px";
} else {
if (img.height > 100) img.style.height = "100px";
}
img.style.visibility = "visible";
}
--></script>
</head>
<body>
<p>
<img class="thumb" src="適当な画像1" onload="func(this)">
<img class="thumb" src="適当な画像2" onload="func(this)">
<img class="thumb" src="適当な画像3" onload="func(this)">
</p>
</body>
</html>

#1です。

> これをサムネイルの表示をする時点でそれぞれ本来の縦横比率に表示する
> ことは難しいでしょうか。

これではどうでしょう。個々のサムネイルごとに修正をかけるので、少しはましかと……。

<html>
<head>
<style type="text/css"><!--
/* 100x100の領域だけ取って、表示しない。 */
img.thumb { visibility: hidden; width: 100px; height: 100px; }
/* ただし、これではスクリプトOFFだと全く表示されない。 */
--></style>
<script type="text/javascript"><!--
function func(im...続きを読む


人気Q&Aランキング