講座１５

　いかがでしたでしょうか。　　お役に立つとよろしいのですが　色々なひな形を作って見せてくださいね。　　楽しみにしています。

　　ひな形はおくが深いというか　とどまることなく色々な技術が出てきますね。　　でも　それにとらわれないで　あなた自身のオリジナルひな形を楽しんでくださいね　　みんなで配信を楽しんでいます。　仲間に入りませんか？　　　ひな形配信は　こちらへ　　哲パパのメールまで

.

　　オオーw(*゜o゜*)w　まるで　コメットさんだわ　魔法の杖で　チチンプイプイノプイ　フィルター　１番の逆を使ったのね。
あの　指定した色を透明にするフィルター３番も面白いし　画像が　左右に向きが変わるのも楽しいわね。　　これを使って色々な雛形を見てみたいわね。　　(≧ｍ≦)ぷっ!　作るといわないところが私らしいでしょう。　オホホホ!!γ(▽´ )ツヾ( ｀▽)ゞオホホホ!!

　ということで　他にも　Alohaとかあるのですが　次回をお楽しみにということで　上のフィルター　色々と試してみてくださいね。
ここにひとつ　フィルターを利用して　ひな形を作っていました。　　参考例

<IMG id="image2" src="mar2.gif" style="position:absolute; left : 100px; top : 100px;
z-index : 1;" class="time" begin="1">
<t:set targetElement="image2" attributeName="filter" to="blur(direction=45, strength=5, add=true enabled='true')" begin="image2.mouseover" end="image2.mouseout"/>
<t:transitionFilter id="fade2" targetElement="image2" type="fade" subtype="crossFade" mode="in" begin="image2.begin" dur="3" autoreverse="false" repeatcount="1" />

属性の値　　add=true false 　　direction=n　　strength=n

　('-'*)(,_,*)('-'*)(,_,*) ウンウン　クッピー　比べてみたらね　t:set のところ　enabled="true" と　enable="false"　というのがあるんだけど？　このちがいはなあに？　　２番目に　endが付いてないのは　そのまま　普通の表示で残しているのね。

　そうそう　そこね　最初の方は　普通に表示して　t:set マウスオンで　グレースケールを有効(true) 可能にする。　　２番目のは　グレースケールで出して　t:set　マウスオンで　グレースケールを無効(false)にする。　　だから　２番目は　普通の表示に変わるのね。　('-'*)(,_,*)('-'*)(,_,*) ウンウン　つけてもいいわよ　つけると　今度は　上と逆になり　マウスを離すとグレースケールになるということね。

同じように　色々な　フィルターの効果があるもの　下に並べてみますね。　上のソースのフィルターの部分を変えただけです。

もちろん　HTML+TIMEと組み合わせないで　各フィルターの効果だけの表示でそれぞれに次のように出来ますよ。

<IMG src="mar3.gif" style="position:absolute; left: 100px; top: 100px; z-index: 1; filter: gray">

<IMG id="image11" src="mar1.gif" style="position:absolute; filter:gray(enabled='true');　left : 100px; top : 100px; z-index : 1;" class="time" begin="1">
<t:set targetElement="image11" attributeName="filter" to="gray(enabled='false')" begin="image11.mouseover" />

上との違いがわかりましたでしょうか？　これは　最初にフィルターでグレースケールを出しておいてマウスオンで普通の画像に変わるの設定になっています。　　よく比べてもらうとわかると思いますが・・・

ソースの説明は　画像　id="image1"を　フェイドインで３秒かけて出します。　マウスを画像に当てるとグレースケールに変わりマウスを放すと元に戻ります。　　グレースケールで画像を表示して普通の画像にしたい場合は　次のようになります。　

ソースは
<IMG id="image1" src="mar1.gif" style="position:absolute; left : 100px; top : 100px; z-index : 1;" class="time" begin="1">
<t:set targetElement="image1" attributeName="filter" to="gray(enabled='true')" begin="image1.mouseover" end="image1.mouseout"/>
<t:transitionFilter id="fade1" targetElement="image1" type="fade" subtype="crossFade" mode="in" begin="image1.begin" dur="3" autoreverse="false" repeatcount="1" />

(^_^)/　みなさん　こんにちは　エル　お久しぶり　元気にしていた？　皆さんは　講座の方　いかがですか？　進んでいますか？
ゆっくり　ぼちぼち　行きましょうね。

　はーい　クッピー　ところで　今日のタイトル　どうしたの？　なんだかいつもと違うみたい。　　またまた何か考えているわね。

　　そうそう　今回のタイトルはね　filterの影をつける効果を使っているのよ　(*^.^*)エヘッ　いいでしょう　　filterはひな形では　結構使われているのです。　　それをまとめてみようと思いまして　フィルターには一般的なfilterとDirectX Filterがありますので、今回のお話はfilterでこれはie4.0から表示することができます。　今回のfilterをHTML+TIMEと組み合わせてみました。　　フィルターはPCにかける負担は高いそうですので　プログラムを組むときなるべく負担が少なくなるよう工夫してくださいね。

ここでは　マウスオンでフィルターの効果が出るようにしてみました。　サンプル画像は　(*^.^*)エヘッ　クッピーの花切手です。
　

2. filter: Blur() 画像ににじませたような効果を与えます。