FCafe　 スライドショー 2

　　苦節○ヶ月、やっと壁紙が変えられるようになったへたれ管理人です。
（　これで 「素材屋さん」 の仲間入りも出来るかも？　）
さて、１箇所分のスペースで複数の画像を表示（参照）できるようになりました。
前の記事にアップロード時のネーミングのみでそれを実現する方法を述べましたが、
記事中に書く IFRAME タグが長めに感じられるきらいがなきにしもあらずでした。
（　テンプレートを変更しても画像はそのまま見られる、　という利点はありますが　）

「投稿時の記述（手間）」　をもっと簡潔にできないものか、と別の方法も考えてみました。


 

現在(2006/01) verUP しております　⇒

　
　　
　　
（　スライドショー用の共通関数 作れば記事中のスクリプトは短くできるんじゃ？）
id 指定とか、グローバル変数（もう何個使ってたっけ）とかはなるべく使わないで・・・
そう考えてアレコレ試してみていたら、何とか実用になりそうなのが出来ました。
画像タグ中にイベントハンドラを組み込む方法です。　（totalでは前記事より短い？）


　【 設置法 】　まず head 領域に以下のスクリプトを書きます。

　【 使用法 】　前記事の例を用いて説明します

　○　愛犬の写真（jpg）が３枚あり、これを切り替えて表示したい場合、
　○　テーマ（グループ名）を決めます　（半角英数字にして下さい）　　例） dog
　○　３枚の画像を　dog-1.jpg　dog-2.jpg　dog-3.jpg　の名前でアップします
　○　記事中の画像表示部に以下のタグを書きます
・・・以上です。　（ alt オプション等は各自設定されて下さい）


前記事の方法と異なり画像表示に img　タグを用います。　　タグ中の一行スクリプトで投稿毎に変えるのは　数字部分だけです。　つまり、
　<img src="最初の画像名" onClick="this.src=chg(this.src,枚数)">

・・とする訳です。


　【 解 説 】　クリック（等）で呼ばれたスクリプト（関数）　chg()　は画像のファイル名と自分に与えられた引数から次に表示すべき画像ファイルを知り、表示されている画像の　src　と交換します。
今回の方法の特徴は、以下の通りです

　　○　画像形式を問わない（ gif、 png 画像も可。　但し一連の画像は同形式であること）
　　○　頁内・記事内複数箇所で使用可能　（ これは前記事の方法も同じ）
　　○　グループ毎に　class 、 id 、 alt ( title )　オプション等を変更可能
　　○　イベントハンドラを　onMouseOver 等とする事で他のユーティリティと併用可能？

★　onMouseOver に変更した例

2005 / 02 / 28 　Mon
Entry   
Comment 6 / TB 0 / Edit