スポンサーサイト

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

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

 今回は、2枚の画像をマウスオーバー・マウスアウトでトラジションをつけて切り替えるスクリプトをメール用に作ってみました。

 デスクトップなどにフォルダを作成して、HTMLファイルと画像フォルダーを同じフォルダーに格納して、画像URLは画像ファイル名だけにして動作することを確認してから投稿してください。投稿の手順は、「メール作成」のプルダウンメニューからから「ひな形を選択」をクリックして、作ったフォルダーの中のHTMLファイルをクリックすると、投稿することができます。

メールのソースのスタイルを次のように編集する
<style>
.photo {
position:absolute;
top:100px;
left:50px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Fade(duration=2);
}
</style>


 次に<body>以下に次のスクリプトを挿入する。<>は半角に。画像のURLはファイルのプロバティーを見て入れてください。

<div onmouseover="photo1.filters[0].apply(); photo2.filters[0].apply();photo1.style.visibility='hidden';photo2.style.visibility='visible';photo1.filters[0].play();photo2.filters[0].play()"
onmouseout="photo1.filters[0].apply(); photo2.filters[0].apply();photo2.style.visibility='hidden';photo1.style.visibility='visible';photo1.filters[0].play();photo2.filters[0].play()">
<img id="photo1" class=photo src="画像1のURL" style="visibility:visible;"/>
<img id="photo2" class=photo src="画像2のURL" />
</div>

コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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