昨年の記事を読み返しておりましたら、ver UP 可能なアイテムがある事に気付きました。
個人的には一番の「お気に入り」であるにも拘わらず自身では使用していない画像表示方法についての記事です。 順次表示形式・選択表示形式の二タイプを御紹介済みでしたが、双方でIFRAMEを用いる方法について別法を試みました処、実用に供し得ると判断し発表させて頂くことにしました。
まずは順次(シ-ケンシャル)表示タイプについて。
これに関してはスライドショーとスライドショー2の二通りの方法をお示しした訳ですがIFRAMEを用いる前者の方法には「テンプレートに依存しない」というメリットがある一方で、画像群毎にIFRAME用ファイルをリネームしてアップロードする必要がありました。 これが不要になります。
【 使用法 】 以下のソースをメモ帳などのエディタにコピペして適当な名前(例: photo.html )のHTMLファイルとしてPCにセーブし, FC2blogにアップロードしておきます
<html><head>
<style type="text/css">
body { height:100%; background-position:center; background-repeat:no-repeat }
</style>
<script type="text/javascript">
n=0; p=location.hash.split('-');
fn=p[0].split('#')[1]; pn=p[1];
function Change() {
n++; if (n>pn) { n=1; }
document.body.style.backgroundImage="url("+fn+"-"+n+".jpg)";
}
</script>
</head>
<body onload="Change()" onClick="Change()">
<noscript> You Need Script </noscript>
</body></html>
○ 愛犬の写真(jpg)が3枚あり、これを切り替えて表示したい場合、
○ テーマ(グループ名)を決めます (半角英数字にして下さい) 例) dog
○ 3枚の画像を dog-1.jpg dog-2.jpg dog-3.jpg の名前でアップします
( 1 からの続き番号にして下さい。 名前と番号は半角マイナス記号で繋げます )
○ 記事中の画像表示部に以下のようにインラインフレームのタグを書きます
dog 画像のグループ名
3 画像枚数
X (最も大きい)画像の横幅 (例:300 )
Y (最も大きい)画像の高さ
【 解 説 】 オリジナルの記事ではファイル名自体によって表示する画像(群)の名前や枚数を判定させていましたが、今回の方法は location.hash (#以下の文字列)を用いています。
( 窓用のファイルをアップロードする手間が省けるのみならず 容量の節約にもなります )
.
その他の点についてはオリジナルの方法とほぼ同様です ( jpgファイルのみ対応 )
*御注意: シリーズ名自体にマイナス記号を使わないで下さい
★
洵
洵
Edit 01/07 01:14 |
あけましておめでとうございます、danielさん。 |
★
daniel
daniel
Edit 01/07 01:53 |
おめでとうございます 洵さん。 |