スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

クリックで画像9枚を替えて表示しました

<>


インラインスクリプトを使用したGooBlog用手動スライドショーのソースです(例によって<>は半角に直してください
使った画像は私のホームページの画像を使いました。
気づかれる方もおられたと思いますが、掲載したスクリプトと私のエントリーはすこし挙動に違いがあります。それはたて写真横写真を区別して中央に表示するため、位置を切り替えて表示しているためです。汎用スクリプトになじめない面もありますので、その処理はテンプレートプログラムからは省いています。
画像の縦横は、this.width の大きさで条件分岐しています。挑戦なさる方はソースを見ていただいてご自分の表示環境に合わせてください。


<div style="position:relative;height:550px;"><div style="position:absolute;top:0px;left:0px;width:550;height:550;"><span style="font-size:1px;color:#ffffff"><<img border=3 src="初期画像URL"style="filter:revealTrans(duration=1,transition=10)"onClick="num=this.filters.revealTrans.transition;num++;if(num>22) num=0;this.filters.revealTrans.transition=num;this.filters.revealTrans.Apply();p=num%8;if(p==0){this.src='画像1URL';}else if(p==1){this.src='画像2URL';}else if(p==2){this.src='画像3URL';}else if(p==3){this.src='画像4URL';}else if(p==4){this.src='画像5URL';}else if(p==5){this.src='画像6URL';}else if(p==6){this.src='画像7URL';}else if(p==7){this.src='画像8URL';}this.filters.revealTrans.Play();">></span></div></div>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。