画像ファイルのURLを与えて画像を読み込み、指定場所に表示する方法です。ここで扱う画像の容量は小さく読込時間への考慮はしないことにします。利用すると、多様な画面処理が比較的容易に記述できます。それに関しては、「jQueryの基礎」を参照してください。例1この下に”例1画像表示場所”があります。-->このパターンは、画像読込の基本形です。オが画像の表示場所であることを示すために、<img>である(divやpではない)ことが必要です。アでオの情報がメージオブジェクトとして定義されます。Image();」で定義した後、アの情報を受け取ることと同じことになります。"例1画像表示場所;」としたのではいけません。)を行え」という命令です。ここで画像を読み込むのではなく、エで読込み、読込が成功したらこの処理をするのです。src="image1.jpeg">としたのと同じことになります。このような回りくどい記述をするのは、画像を探して読み込むまでに時間がかかるからです。(厳密に理解するには非同期処理やコントラクタなどの概念が必要になるので省略します。画像読込のときのオマジナイだと理解してください)ここでは対象となる画像ファイルが存在し、サイズも小さく短時間で読み込めることを前提にしています。ないときは、かなり複雑な記述になります。src="~">の"~"であることが類推されます。このように、読み込んだ画像ファイルの内容を知ることができます。-->例1のアが、ここのアのように変わります。これはオが<img>ではなく、<img>になっており、その場所が引数として渡されているからです。srcは相対パスではなく、絶対パスになります。ここで得たwidth,heightを用いて、画像表示を工夫することができます。例2で画像のwidthを知ることができましたが、逆に画像の表示widthを指定することができます。<img>に記述があっても無視されます。height="100">のようにwidthとheightの両方を指定すると、画像の縦横比が300:100以外の場合は縦長・横長に変形してしまいます。ここでは、画像の縦横比を保ちつつ<img>で指定した矩形に収まるように表示します(画像の縦横比により<img>のサイズを変更します。height=100>例5:<img>内の画像表示位置の指定(<img>サイズは保持)例4では、<img>サイズが変化してしまいましたが、縦横比の異なる複数の画像を並べて表示するような場合、<img>のサイズは固定し、その中で画像表示したい、しかも中央揃えや下揃えなどもしたいことがあります。上の赤い枠は<img>の範囲(300,200)で、ここでは画像を中央下揃えに表示しています。このような処理はscriptだけでは実現できず、CSS(style)を用いる必要があります。そのstyleを右に示します。<:img>でwidthやheightを指定しても、styleでの指定で変わるので無効になります。src="image1.jpeg"></div>これを関数にしましょう。例4のように、縦横比によりimgの範囲で最大になるよう圧縮・拡大します。単純にいえば、このstyleをscriptで生成すればよいのです。→「width,heightは無効」だといいましたが、ここではこの値をstyle生成に使うので必要です。縦位置でimgで指定した枠のなかで画像の表示位置を指定します。"下"クラス名とスタイル生成場所この処理は、style(CSS)での指定が必要であり、それをscriptで生成しています。指定したクラス名(任意の文字列でよい)のstyleをスタイル生成場所に生成します。これは表示されません。クラス名とスタイル生成場所は、「使い捨て」ですが、他と重複しない必要があります。imgタグはdivやpなどのタグで囲まなければなりません。例6:表示してある画像の情報取得HTMLに表示されている画像のURL、サイズなどを得て表示します。id="例6表示場所"></div>「例2」と逆に、画像(対象画像、具体的には「id="例6画像")が表示されており、それの情報を得ることが目的です。A:これにより情報が「画像」オブジェクトに入ります。B:画像情報で有用な要素は、src(URL)、width(幅のpx単位)、height(高さ)でしょう。「画像.src」の形式で得られます。画像.src」のように、得られた値はスクリプトのなかで自由に参照・加工ができます。例7:画像の拡大(同一位置)画像をクリックすると、拡大されます。--></input></p>「例6」での画像のサイズ(画像.width)を変更するだけで画像サイズが拡大します。