こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

連続したURLへのwindow.openの指定方法

JavaScript初心者です。

画像のサムネイル一覧のページがあり、サムネイルをクリックすると元の画像が別ページで開く
というページを作っています。

今は
<a href="元の画像.jpg" target="_blank"><img src="サムネイル.jpg"></a>
としているのですが、window.openを使ってウィンドウのサイズ指定を行いたいと考えております。

画像ファイル名が"001.jpg","002.jpg","003.jpg"…となっている場合、その画像のサイズを取得してそのサイズにウィンドウを開くスクリプトを教えてください。

宜しくお願いします。

投稿日時 - 2005-10-13 14:13:33

QNo.1711018

困ってます

質問者が選んだベストアンサー

>ただ、画像が50枚あったら50個書かないといけないんですよね?
この質問でそこまで要求してると思えないのですが、、。
確かに、連続とか書いてるけど、、。
(=w=;


まあ、いいや。修正。
ファイル名が001.jpgからの連番しか無いと考えた場合、
サムネイルと元画像が同一フォルダにあるとは考えられないので、
moto,sam でフォルダ分けました。
後、画像の並べ方書いて無いから、とりあえず、
上から、下に一列表示


<html>
<head>
<script type="text/javascript">
function ImageOpen(strName)
{
var img1 = new Image;
img1.src = strName;
var strPalam;
strPalam = "'width=";
strPalam += img1.width;
strPalam += ",height=";
strPalam += img1.height;
strPalam += ",width=";
strPalam += img1.width;
strPalam += "'";
window.open(strName, '_blank', strPalam);
}

function Oninit() {
var strUrlCode;
var strBaseCode;
strBaseCode = "";
var strNum;
for( var iCnt=1; iCnt< 99 ;iCnt++) {
if( 1000 <= iCnt ) {
strNum = iCnt ;
}
if( 100 <= iCnt ) {
strNum = iCnt ;
}
else if( 10 <= iCnt ) {
strNum = "0"+ iCnt ;
}
else {
strNum = "00"+ iCnt ;
}

strUrlCode = "<img src='./SAM/" + strNum + ".jpg' width = 100 onclick='ImageOpen(\"";
strUrlCode += "./MOTO/";
strUrlCode += strNum + ".jpg\");'><BR>";
strBaseCode += strUrlCode;
}
document.all.IMG_TARGET.innerHTML =strBaseCode;

}

</script>
</head>

<BODY onload="Oninit()">
<DIV id="IMG_TARGET"></DIV>
</body>
</html>

投稿日時 - 2005-10-14 03:28:16

お礼

わかりにくい質問ですいません。

お陰で無事動きました!
ここまで長いスクリプトが必要になるんですね。

本当にありがとうございました。

投稿日時 - 2005-10-16 00:48:54

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

失礼しました。サムネイルと元画像は別だったんですね
こちらの早とちりでした。
(=w=;
修正。たいしてかわらんけど

<html>
<HEAD>
<SCRIPT TYPE="text/javascript">
function ImageOpen(strName)
{
var img1 = new Image;
img1.src = strName;
var strPalam;
strPalam = "'width=";
strPalam += img1.width;
strPalam += ",height=";
strPalam += img1.height;
strPalam += "'";
window.open(img1.src, "Test", strPalam);

}
</SCRIPT>
</HEAD>
<body>
<img src='サムネイル.jpg' width = 50 onclick='ImageOpen("元の画像.jpg");'>
</body>
</html>

投稿日時 - 2005-10-13 16:55:28

ANo.2

こんな感じ

<html>
<HEAD>
<SCRIPT TYPE="text/javascript">
function ImageOpen(obj)
{
var img1 = new Image;
img1.src = obj.src;
var strPalam;
strPalam = "'width=";
strPalam += img1.width;
strPalam += ",height=";
strPalam += img1.height;
strPalam += "'";
window.open(img1.src, "Test", strPalam);

}
</SCRIPT>
</HEAD>
<body>
<img src='サムネイル.jpg' width = 50 onclick='ImageOpen(this);'>
</body>
</html>

投稿日時 - 2005-10-13 16:39:21

お礼

ご回答、ありがとうございます。

この方法で画像のサイズを取得して出来ますね。
ただ、画像が50枚あったら50個書かないといけないんですよね?

投稿日時 - 2005-10-13 18:45:28

こんにちは。

以下のような関数をイメージしてはどうでしょう?

function showThomb(画像参照番号)
{
画像参照番号を使用して画像の高さと幅の変数作成
変数にそれぞれ画像の高さと幅を代入
取得した変数を使用して新しいウィンドウを開く
}

取得する方は、これを実行するとイメージしやすいと思います。
function showThomb(imgNumber)
{
var wd, hg;
wd = document.images[imgNumber].width;
hg = document.images[imgNumber].height;
alert(wd + ":" + hg);
}

※imgNumberは、画像の参照番号を入れてください。
※ゼロからスタートします。

私もJavaScriptはよくわかってないので、理想的な答えかどうかはわかりませんが、頑張ってください!

投稿日時 - 2005-10-13 15:33:43

あなたにオススメの質問