スポンサーサイト

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

Windowsメールでトラスラ その2

 メールでスライドショーのスクリプトを記述する場合に、このGooブログの投稿と比べて、便利なことがある。ひとつは、ヘッダーでスタイルを記述できること。いまひとつは、スクリプトをFunction(関数)としてイベントプログラムとは別の場所に記述することができることだ。関数が記述できれば、マウスイベントのプログラムは関数を呼び出すだけですむので、簡潔に記述できる。

 今回試作しようとするスライドショーの場合、絶対配置で、TOP、LEFTともに同じ値でいいし、同じトランジション設定をするならば、すべて、ヘッダーにスタイルのクラスを記述して、 CLASS=クラス名 画像のソース中では簡略にかける点だ。スタイルの記述は次のようになる。

<style>
.photo {
position:absolute;
top: 100px;
left: 100px;
visibility: hidden;
border-style: inset 2px;
filter: progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>

と定義して、画像のタグの中で class="photo" と書いてやれば、画像を重ねて配置できる。

 あとは、画像のスタイルの visibility を表示、非表示と切り替えていけば、スライドショーが出来上がることになる。

 次に、複数の画像を絶対配置で同じ位置に配置したときに、どの画像を可視にするかは、ID名を通じてスタイルを変えていかなければならない。
 たとえば10枚の画像のID名を photo に続く連番 photo1 photo2 photo3とつけたとすると、変数の番号を変化させてID名のスタイルを変更できれば、簡単なスクリプトでそのスタイルをへんこうできる。

 こんなとき利用できるのがID名の最初の英字をphotoとして、現在の表示画像の番号をいれる変数をnumとすると、次のようにしてへんこうすることができる。

document.all("photo"+num).style.visibility="hidden";
あるいは
document.all("photo"+num).style.visibility="visible";

 このスクリプトを使って、まずすべての画像を非表示にして、num番目の画像を表示することができるようになる。

 この投稿ではこのくらいにして、次回は実際にスライドショーを作ってみることにします。

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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