画像ファイルの種類とConnexionsモジュールで使用されるMIMEタイプは以下の通りです。
- eps - mime-type="application/postscript"
- png - mime-type="image/png"
- jpeg - mime-type="image/jpeg"
- gif - mime-type="image/gif"
上記がすべてではありません。有効な
MIMEタイプがある画像なら使用することができます。
モジュールに画像を埋め込むには、以下のようにCNXMLを入力してください。
<figure id="figure-01" orient="horizontal" display="block">
<name>Example Figure</name>
<media id="envimg" alt="An envelope w/ tall text.>
<image type="image/png" src="envelope-taller.png"/>
</media>
<caption>A graphic image displayed as a figure.</caption>
</figure>
mediaタグのsrc属性には、モジュールで表示したい画像を、場所かソースで指定します。画像がアップロードするか、インターネット上のほかの場所に保存されたイメージの完全なURLを持っている場合、この属性はファイル名のみになる場合があります。
実際の画面は以下のようになります。
subfigureタグを使用することで、あなたは1つの図の中に2つの画像を置くことができます。これは、画像を左右や上下に並べて表示したい場合に役に立ちます。2つの画像を1つの図の中に表示するには、以下のようにCNXMLを入力してください。
<figure id="figure-2" orient="horizontal" display="block">
<subfigure id="subfigure-1">
<title>Tall Icon and Envelope</title>
<media id="tallenv" alt="An envelope w/ tall writing.">
<image mime-type="image/png" src="envelope-taller.png"/>
</media>
<caption>
Subfigure 1.
</caption>
</subfigure>
<subfigure id="subfigure-2">
<name>Small Icon and Envelope</name>
<media id="smallenv" alt="An envelope/ small writing.">
<image mime-type="image/png" src="envelope.png"/>
</media>
<caption>
Subfigure 2.
</caption>
</subfigure>
<caption>Two images displayed horizontally in one figure.</caption>
</figure>
実際の画面は以下のようになります。
orient属性はhorizontalかverticalという値を持つことができます。それにより画像がどのように配置されるか指定することができます。
オンラインで画像を閲覧するときは適切なサイズで表示されるが、印刷時に大きくなってしまう場合、印刷バージョンのための画像ファイルの追加ができます。eps形式でフォーマットされた画像ファイルは印刷に適しています。同じ画像のeps形式ファイルとpng形式ファイルがモジュール内にある場合、Connexionsは印刷時のPDFファイル生成にはeps形式を、オンラインでモジュールを表示するにはpng形式を使用します。
印刷バージョンのための追加画像ファイルの追加方法は以下のようになります。
- 画像ファイルの
eps形式バージョンを作成してください。そして適切なサイズにしてください。 -
eps画像ファイルのメディアタイプ入力を、index.cnxml内に挿入してください。画像ファイルは同じ名前を持たなくてはなりません。例えば"image1.png"(オンライン)であれば、"image1.eps"(印刷)となります。
eps画像ファイルをモジュールに追加してください。
CNXMLコードの例です。
<figure id='printimage'>
<media type='application/postscript' src='image.eps'>
<media type='image/png' src='image.png'/>
</media>
</figure>
印刷画像(eps）の入力は、オンライン画像(png)の入力の上に現れなくてはなりません。オンライン画像の入力はインデントされ、入れ子にされていなければなりません。
画像をクリックすると、画像を大きなサイズで見ることができます。以下がその方法です。
- 画像ファイルのサムネイルサイズバージョンを作成してください。
- 以下の例で示されているように、フルサイズとサムネイルサイズの
メディアタイプ入力を挿入してください。 - フルサイズとサムネイルサイズの画像をモジュールに追加してください。
CNXMLコードの例です。
<figure id='thumbnail' orient="horizontal" display="block">
<media id="taj" alt="An image of the Taj Mahal"/>
<image type='image/png' src='TajMahal_medium.jpg' thumbnail='TajMahal_Thumb.jpg'/>
</media>
</figure>
は以下のようになります。
MIME Type List
