スポンサーサイト

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

フィルター適用時のはみ出した部分が表示されるためには

 以前に投稿いたしましたBLURフィルターなど、フィルターを適用した場合に元の画像の枠からはみ出した部分がカットされて表示される現象がありました。そのため、すでに枠が大きくなったフィルターを適用後のぼかしの状態を初期画像としてクリックするとフィルターを解除するようにしていましたが、原因がわかりましたので書き留めます。本当のところは原因がわかったというよりは、やってみたらよくなったわけでまだよくわかっていないかもしれません。

 普通の配置(相対配置:Relative)で画像を配置するとフィルターによってもとの画像枠よりはみ出た部分はカットされてしまいます。それをふさぐには、画像を絶対配置で表示してやるとフィルター効果を適用したとき、画像の枠にはみ出た部分を表示されるようになります。

 ただし、このGooブログで最初から絶対配置で画像を配置すると、投稿ではなく、ブログ全体にたいする絶対配置となって、意図しないところに画像が配置されたりします。
 これを防ぐには、相対配置の領域をまずつくり、その中に絶対は位置のオブジェクトを配置すると、投稿の中だけの絶対は位置を実現できます。

相対配置のスタイル指定は position: relative;
絶対配置のスタイル指定は position: absolute;
 絶対配置を指定した場合は、top、leftなどの配置位置をしていします。

実際のソースで簡単な例を書くと次のようになります

<div style="position: relative; width: 550px; height:400px;">
<img style="position: absolute; top:20px; left:20px; その他フィルターの記述">
</div>

という風になります。

実例として以前アップした風車の クリックで はっきり→ぼかし となるバージョンを掲載します。

<



ソースです

<span style="FONT-SIZE:1PX;color:white;">
<div style="width:350px;height:500px;position:relative;">
<<img id="p080610" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723640044bd6bbe4513b6_import.jpg" flag=1
style="position:absolute;top:0px;left:0px;border-style:ridge;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=0);" onclick="if(flag==0){flag=1;pr=10;
timer01=setInterval('{if(pr==0){clearInterval(timer01);}
p080610.filters[0].pixelradius=pr--;}',1);}else{flag=0;pr=0;
timer02=setInterval('{if(pr>10){clearInterval(timer02);}
p080610.filters[0].pixelradius=pr++;}',1);}" /></div></span>


コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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