- ベストアンサー
画像サイズを変更させる方法と画像変更の順番
- 画像をクリックしたとき、順番に画像を変更させる方法について解説します。
- 途中で画像が横から縦に変わる際に、縦配置画像をそのまま表示する方法についても紹介します。
- 以下のソースコードを使用することで、画像の順番を変更することができます。
- Po-chan
- お礼率45% (14/31)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Imageオブジェクトを使用すれば、画像のサイズを取得する事ができます。 ↓こんな感じでどうでしょう？ <HTML> <HEAD> <TITLE>順番に画像変更</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> <!-- ImgNum = 0; // 画像番号用の変数を作成。 Imgs = new Array(); // 配列を定義。 Imgs[0] = "image1.jpg"; // 配列に画像のアドレスを代入。 Imgs[1] = "image2.jpg"; // 実行時、数字の順に表示されます。 Imgs[2] = "image3.jpg"; function NextChange(){ img = new Image(); // Imageオブジェクトを作成 img.src = Imgs[++ImgNum % Imgs.length]; //画像を登録 //--- 表示 if(document.all){ PIC.innerHTML = "<IMG SRC=\"" + img.src + "\" WIDTH=\"" + img.width + "\" HEIGHT=\"" + img.height + "\">"; }else if(document.layers){ document.PIC.document.open(); document.PIC.document.write("<IMG SRC=\"" + img.src + "\" WIDTH=\"" + img.width + "\" HEIGHT=\"" + img.height + "\">"); document.PIC.document.close(); } // 次の画像に変更。 } // --> </SCRIPT> <BODY> <DIV ID="PIC" onClick="NextChange();"><IMG SRC="image1.jpg"></DIV> </BODY> </HTML>
その他の回答 (2)
- HUTABA
- ベストアンサー率27% (436/1611)
＞今度は「imgwidth が宣言されていません」というエラーがでます。場所は2個目の”}”の行です。 「.」が抜けていますよ。 解りにくいかもしれませんが、 img.width img.height です。
お礼
すみません！ スクリプト以外のところの問題でした!! (自己解決しました！) いろいろ本当にありがとうございました。 またよろしくお願い致します。。。
補足
何度もありがとうございます。 「.」入力しました。 宣言のエラーは無くなりましたが、今度はまた「未知の実行時エラー」が出ます。。。 ”imgsrc”にも「.」が必要なのかと入れてみましたが、結果は同じでした。（今は外してます。） 初心者で見よう見まねでやっているので、些細な事が間違っているかもしれません。 お手数おかけして申し訳ありません。 PIC.innerHTML = "<IMG SRC=\"" + imgsrc + "\" WIDTH=\"" + img.width + "\" HEIGHT=\"" + img.height + "\">";
- HUTABA
- ベストアンサー率27% (436/1611)
#1です。 すみません。 else if(document.layers){ document.PIC.document.open(); document.PIC.document.write("<IMG SRC=\"" + img.src + "\" WIDTH=\"" + img.width + "\" HEIGHT=\"" + img.height + "\">"); document.PIC.document.close(); } の部分を削除してみてください。 document.layersはネットスケープ用なのですが、そもそもレイヤーを使っていませんね（＾＾； それから、このソースはIEのみ対応になってしまっていますのでご了承ください。
補足
たびたびすみません。 今度は「imgwidth が宣言されていません」というエラーがでます。場所は2個目の”}”の行です。 以下に現在使用させてもらっているソースを示します。 よろしくお願いします。 function NextChange(){ // 関数を定義。 img = new Image(); // Imageオブジェクトを作成 imgsrc = Imgs[++ImgNum % Imgs.length]; // document.images["PIC"].src = Imgs[++ImgNum % Imgs.length]; // 次の画像に変更。 // --> //--- 表示 if(document.all){ PIC.innerHTML = "<IMG SRC=\"" + imgsrc + "\" WIDTH=\"" + imgwidth + "\" HEIGHT=\"" + imgheight + "\">"; } }
補足
HUTABAさんありがとうございます。 早速ソースをコピーさせて頂いたのですが、 プレビューで画像をクリックすると 以下の行の最初の”}”でエラーとなります。 }else if(document.layers){ エラー内容は「未知の実行時エラー」です。 申し訳ありませんが、どうすれば良いでしょうか？？ フロントページ（2002）を使用してます。