切り替え図の種類と操作

 『地質アーティクル』『その他のアーティクル』および『トピックス』ページで使用している図・写真には,表示内容を変化させたり切り替えできるものが含まれています.これは HTML ページの仕組みで実現できるもので,印刷物のアーティクルにはない大きなメリットです.このページでは,それらの図の変更モードについて説明します.


1.自動変更ピクチャー

Pros:
 ・Animation PNG (APNG) 形式の図を利用した自動アニメーションで,無限にループされます.
 ・図の枚数に制限がなく,切り替え速度を速くすれば滑らかなアニメーションにすることもできます.
 ・単一の PNG ファイルで実現できるので,切り替え枚数分のファイルを用意しなくても済むというメリットがあります.
 ・写真画像でも,従来用いられていたアニメーション GIF のような画質劣化がありません.

Cons:
 ・切り替えのタイミングは APNG 作成時にあらかじめセットされており,閲覧者が操作することはできません.
 ・切り替えの停止もできませんので,ある切り替え画像をじっくり見るということはできません.
 ・ページを表示中ずっと切り替えが続いているので,時には鬱陶しい場合があります.
 ・可逆性圧縮により写真などの自然階調画像ではファイルサイズが大きくなるので,ネット帯域の狭い環境では表示ストレスがあります.



2.クリック変更ピクチャー

Pros:
 ・閲覧者のクリック操作により自由なタイミングで切り替えができます.
 ・切り替えた状態はページの他の部分をクリックしても保持されます.
 ・Shift キーを押しながらクリックすることで切り替えの方向を逆にできます.
 ・切り替える画像の数に制限はありません.
 ・画像が何枚あり何番目の画像を表示しているかは,マウスオーバーで表示される tooltip で知ることができます.

Cons:
 ・画像の表示状況や環境により,切り替えの際にタイムラグが発生したり,表示がガタつく場合があります.
 ・切り替えスクリプトのロジックにより,切り替える画像ファイルの名前には規則があり,同一の画像形式のものしか切り替えできません.
 ・スマホ等のタッチスクリーン・ディバイスでは操作・表示に制限があります.
 ・切り替えスクリプトの作成・改善には Javascript のスキルが必要になります.



3.マウスオーバー変更ピクチャー

Pros:
 ・画像の上にマウスオーバーすると画像が変更されます.マウスが離れると元に戻ります.
 ・閲覧者が任意のタイミングで切り替えることができます.
 ・切り替え画像はページ読み込み時にバックグラウンドで読み込まれるため,切り替えにタイムラグがありません.

Cons:
 ・切り替えの仕組みにより,2枚の画像の切り替えしかできません.
 ・マウスが離れると即座に元に戻ってしまいます.
 ・スマホ等のタッチスクリーン・ディバイスでは操作・表示に制限があります.



トップページへ戻る