寺子屋未満 http://terakonya.sarm.net/wordpress 最新Web情報をコツコツお届け Tue, 25 Mar 2008 07:12:24 +0900 http://wordpress.org/?v=ME2.2 ja Frog.jsを使う。(1) - JavaScript Slideshow http://terakonya.sarm.net/wordpress/2007/11/22/100 http://terakonya.sarm.net/wordpress/2007/11/22/100#comments Thu, 22 Nov 2007 14:59:37 +0900 iras http://terakonya.sarm.net/wordpress/2007/11/22/100

JavaScriptを使ったスライドショーです。
サムネイルをクリックすると、中心に画像が表示されます。
動きがキレイで、さらに実装が簡単なので、使いどころがありそうです。

[ダウンロードと設定]
FrogJS Javascript Gallery
から、FrogJS v1.1をダウンロードします。
内部には必要なスクリプト・サンプルが同胞されています。
prototype.jsとscriptaculous.js（effects.js）が必要ですが、
既にサイトに組み込んでいる場合は、frog.jsだけを設定すればOKです。
prototype.js→scriptaculous.js→frog.jsの順に読み込まれるようにしておきます。
<script type="text/javascript" src="xxxx/prototype.js"></script>
<script type="text/javascript" src="xxxx/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="xxxx/reflection.js"></script>

[実装方法]
このスライドショーには、表示用画像とサムネイル用画像のセット画像が必要です。
画像を準備したら、次のようにhtmlを記述します。
＊画像を囲むブロック要素にid[FrogJS]を設定します。
＊リンク要素のパス（href)に表示したい画像のURLを設定します。
＊リンク要素のtitleに設定した値は、画像表示時のタイトルとして表示されます。
＊リンク要素のrelにURLを設定すると、リンク画像にすることができます。
＊img要素のsrcにサムネイル画像のURLを設定します。
＊img要素のaltに設定した値は、画像表示時に説明文として表示されます。
<div id="FrogJS">
　<a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
　　<img src="[サムネイルURL]" alt="[画像の下に表示される説明文]" 　/>
　</a>
　<a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
　　<img src="[サムネイルURL]" alt="[画像の下に表示される説明文]" 　/>
　</a>
　<a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
　　<img src="[サムネイルURL]" alt="[画像の下に表示される説明文]" 　/>
</a>
[以下略]
</div>

[CSS設定]
次のようなidのブロック要素が生成されますので、
お好みに合わせてスタイルを設定してください。

#FrogJS：画像表示部全体
#FrogJSCredit：aタグに指定したtitle表示部
#FrogJSCaption：imgタグに指定したalt表示部

[サンプル]
今回は秋に撮影した紅葉の写真を使用します。
（画像の読み込みが若干重いので動きがスムーズでないです・・・。）

次は若干のカスタマイズ方法と、APIを使って自動的に呼び出した画像を
スライドショーで表示させるプログラムに挑戦してみたいと思います。

]]> http://terakonya.sarm.net/wordpress/2007/11/22/100/feed JavaScriptでTooltipを実装する。(4) -Ajax tooltip http://terakonya.sarm.net/wordpress/2007/11/21/99 http://terakonya.sarm.net/wordpress/2007/11/21/99#comments Tue, 20 Nov 2007 15:48:00 +0900 iras http://terakonya.sarm.net/wordpress/2007/11/21/99 今回は、再びTooltipを実装してみたいと思います。
自分の作成した任意のhtmlファイルそのものを表示させるTooltipです。

[dhtmlgoodies.com - Ajax tooltip]
http://www.dhtmlgoodies.com/index.html?whichScript=ajax-tooltip
[Download script]You can download the entire script from this Zip file から
必要なファイルを一括ダウンロードできます。
デモページも同胞されていますが、自分のページに実装する場合に必要となるのは
以下の3javascriptファイルと1cssファイル(+1イメージファイル)です。
<script type="text/javascript" src="/ajax-dynamic-content.js"></script>
<script type="text/javascript" src="xxxx/ajax.js"></script>
<script type="text/javascript" src="xxxx/ajax-tooltip.js"></script>
<link rel="stylesheet" href="xxxx/ajax-tooltip.css" media="screen" type="text/css">

【実装方法】
1.Tooltipで表示させたいhtmlファイルを用意します。

サンプルをみたところ、<html></html>で囲まれたファイルではありません。
完成したhtmlでなく、部品としてのhtmlとなります。
（あくまでも、読み込んで本体htmlに埋め込む、というイメージです）

2.Tooltip表示をしたい部分にスクリプトを追加します。
マウスオーバー時に[ajax_showTooltip]ファンクションを実行させ、
マウスアウト時に[ajax_hideTooltip]ファンクションが実行されるよう、
オブジェクトにイベントを追加します。
（Aタグ-リンクオブジェクトの場合)
<a href="[リンク先]" onmouseover="ajax_showTooltip('[表示させたいhtmlの相対パス]',this);return false" onmouseout="ajax_hideTooltip()">

サンプル用に簡単な画面を作成しました。
サンプルでわかるように、aタグだけでなく、
imgやdivオブジェクトのonmouseoverイベントにも使用可能です。

Sampleページはこちら


★注意1
IE（IE6)ではうまく動かないようです。
バルーン表示はされますが、中のサイトが表示されません・・・。

★注意2
引数に指定できるURLは本体htmlからの相対パスです。
httpから始まるURLは使用できません。

★注意3
Tooltipとして表示させたいhtmlはあくまでも本体から読み込むhtmlの部品（一部）となります。
そのため、Tooltip用htmlと本体htmlを異なるパスに設置させる場合、
画像のsrcなどは、本体htmlからの相対パスを指定するようにします。
ここに書かれていることが参考になると思います。

★注意4
ajax.jsで使用されるリクエストが、デフォルトでPOST設定になっているため、
バルーン部分に、
「405 Method Not Allowed」
とhttpエラーが表示されて、Tooltipが表示できない場合があります。
POSTメソッドによる呼び出しを使用する事を禁止している場合があります。
（XMLHttpRequestのメソッドタイプがPOSTだと自分のサーバーでエラーとなりました。）

メソッドタイプをPOSTからGETに変更するためには、ajax.jsの9行目
this.method = "POST";をthis.method = "GET";と書き換えてください。（・・・かなりはまりました。）

Sampleページ

]]> http://terakonya.sarm.net/wordpress/2007/11/21/99/feed Reflection.js（Apple風鏡面効果）を使う。 http://terakonya.sarm.net/wordpress/2007/11/18/97 http://terakonya.sarm.net/wordpress/2007/11/18/97#comments Sun, 18 Nov 2007 07:57:40 +0900 iras http://terakonya.sarm.net/wordpress/2007/11/18/97
ご無沙汰しております。
お仕事にうつつを抜かしており、ひさびさの更新です。

以前に、
Reflector（鏡面効果）
Reflex.js（鏡面効果+立体効果）

という鏡面効果を出すスクリプトを使ってみましたが、
今回は鏡面効果＋鏡面箇所に奥行きを出すスクリプトを実装してみたいと思います。
Appleのサイトでよく目にするような鏡面効果です。

[ダウンロードとインストール]
3d image reflection with javascript
（http://ajaxorized.com/3d-image-reflection-with-javascript/）
下のほうにある[Download the full package here.]から必要なファイルをダウンロードできます。
prototype.jsとscriptaculous.js（builder.js）が必要ですが、
既にサイトに組み込んでいる場合は、reflection.jsだけを設定すればOKです。
prototype.js→scriptaculous.js→reflection.jsの順に読み込まれるようにしておきます。
<script type="text/javascript" src="xxxx/prototype.js"></script>
<script type="text/javascript" src="xxxx/scriptaculous.js?load=builder"></script>
<script type="text/javascript" src="xxxx/reflection.js"></script>

[使用方法]
非常に簡単です。
今回のサンプルにはこの画像を使用します。
zoiak4gzmd.jpg
花もみじ photo by xtc（この写真・・・・美しすぎます。）

鏡面効果を適用したい画像をdiv要素で囲み、divにidを指定しておきます。
<div id="terako_sample">
<img src="画像URL"/>
</div>

divに指定したidを引数として、Reflect3Dオブジェクトを作成すれば、
鏡面効果を得ることができます。
<script type="text/javascript">
new Reflect3D('terako_sample');
</script>
立体的な鏡面効果をつけるとこのようになります。

花もみじ By xtc

鏡面部分は背景色が透過されているようです。
（外側にもう一つブロック要素を作成し、背景色を変えてみました。）

花もみじ By xtc

[注意点]
div要素にtext-alignのスタイル指定をすると、
画像と鏡面部分がずれてしまうようです。
（text-align:center指定をしようとしましたが、うまくいきませんでした。）
padding、marginによる左右の位置調節は問題ありません。

※オプションの引数は特にないようでした。

☆不定期更新ですが、目指せ週末プログラミング！です。
（週末にプログラムしたものをまとめながら徐々に紹介していけたらと思っています。）

]]> http://terakonya.sarm.net/wordpress/2007/11/18/97/feed JavaScriptでTooltipを実装する。(3) -bubble-tooltip.js http://terakonya.sarm.net/wordpress/2007/10/10/96 http://terakonya.sarm.net/wordpress/2007/10/10/96#comments Tue, 09 Oct 2007 15:41:30 +0900 iras http://terakonya.sarm.net/wordpress/2007/10/10/96

今回のTooltipは、吹き出しの形で表示されるものです。
画像が準備されているので、カスタマイズは大変かもしれませんが、
（改変する場合は、GNU ver2のルールに従う必要があります。）
ちょっと変わった吹き出しTooltipを簡単に導入できます。

[Ballom tooltip]
http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip

◆dhtmlgoodies.comには、大量にScriptがあります。ワクワクしてきます。

[ダウンロードと設定]
Ballom tooltipの[ You can download the script from this Zip file ]リンクから
Zipファイルをダウンロードします。（ファイル名はbubble-tooltip.zip）
解凍すると、cssファイルフォルダ、jsファイルフォルダ、imageファイルフォルダがあります。
（その他、サンプルhtmlとライセンスドキュメントがあります。）
各フォルダを適当な場所にアップしたら、
適用させるhtmlファイルにCSSとJavaScriptを宣言します。
imagesフォルダは、CSSファイルから読み込むので、
パスの相対関係やフォルダ名変えずにアップします。//JavaScript
<script type="text/javascript" src="xxxxxx/bubble-tooltip/js/bubble-tooltip.js"></script>
// CSS
<link rel="stylesheet" href="xxxxxx/bubble-tooltip/css/bubble-tooltip.css" type="text/css" media="screen" />

[実装方法]
非常にシンプルです。
まず、htmlファイルのどこかに、Tooltip生成用のdiv要素を準備しておきます。
これは、CSSで制御されており実際に表示されることはありません。<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>

次に、吹き出しを表示させたい要素で、
マウスオーバーイベントで表示用functionを呼び出し、
マウスアウト時に非表示用functionを呼び出します。
※DemoではonMouseMoveイベントでfunctionを実行しているのですが、
ブログの環境上、うまく表示されないため、onMouseOverイベントで実行させています。<a href="#" onMouseOver="showToolTip(event,'吹き出しに表示させる文字。');return false" onMouseOut="hideToolTip()">Sample Link</a>
次のリンクにマウスを当ててみてください。

Sample Link

aタグだけでなくsapnタグ、divタグでも利用可能です。

ブロック領域の場合は、その領域のどこにマウスを当てても
Tooltipが表示されることになります。

span タグの場合も同様に、Tooltipが表示されます。

今回ブログにこのTooptipを組み込んだのですが、
隠しdivブロックがhtml直下にあるという前提で吹き出しを表示させる位置計算がされているため、
ちょうどよい位置に吹き出しを表示させるためにプログラムを少し改造しました。
そのあたりの調整がブログなど固定サイトに組み込む場合は、少し苦労しそうです。

]]> http://terakonya.sarm.net/wordpress/2007/10/10/96/feed JavaScriptでTooltipを実装する。(2) -glt.js http://terakonya.sarm.net/wordpress/2007/10/05/94 http://terakonya.sarm.net/wordpress/2007/10/05/94#comments Thu, 04 Oct 2007 15:30:00 +0900 iras http://terakonya.sarm.net/wordpress/2007/10/04/94 今回もTooltip。

[GLT - Good-Looking Tolltips]
http://www.robertnyman.com/glt/index.htm
画像やCSSを自分で準備しなければいけない分、前回よりは難しいかもしれません。
ですが、導入するファイルは少なく軽量であるところや、
一つのページで一括してカスタマイズCSSが使えるところは、
使いようによっては便利な気がします。

[ダウンロードと準備]
【JavaScript】
GLTのトップページの[Download the JavaScript file.]からglt.jsをダウンロードします。

【CSS】
GLT ＞ Implementation [Customizing the look]に書かれているCSSをコピーし、
自分のページに取り込みます。
もちろん、このCSSはカスタマイズ可能。
今回は寺子屋のデザインにあわせ、Tooptipの色をピンクにします。（デフォルト設定はグレー）
書き換える部分は簡単です。.glt-elm p{
　　　　background: [ここに好きなカラーコードを記述];
　　　　margin: 0;
　　　　padding: 0.5em;
}文字色を変更する場合は、次の部分を変えます。.glt-elm{
　　　　position: absolute;
　　　　left: 0;
　　　　top: 0;
　　　　width: 150px;
　　　　color: [ここに好きなカラーコードを記述];
　　　　opacity: 0.9;
　　　　visibility: hidden;
}

【画像】
Tooltipの上下に設定する画像を準備します。
デフォルト画像はImplementationのCSSの下、
[top rounded image] [bottom rounded image] から取得することができます。
この画像をもとに、自分の表示したいTooptipにあわせて加工します。
今回は背景色を変えているので、画像もそれに合わせます。

画像が準備できたら、画像のPathをglt.jsに記述します。
9行目、10行目に画像を設定している部分があるので
（Customization parameters とコメントあり）
そこを自分の画像Pathに合わせて書き換えます。
注：Tooptipを表示させるページから見たPathを記述します。

画像を指定しない場合はnulを記述します。（角が四角いままのTooltipとなります）
topImagePath : "Tooptip上部分の画像Path",
bottomImagePath : "Tooptip下部分の画像Path",

[指定方法]
ここまでの準備はちょっと手間がかかりますが、使用方法はとても簡単です。
マウスオーバーした際に、Tooptipを表示させたい領域に [title]指定するだけ。
titleが指定された領域は、全て設定したTooltipが表示されます。
ですので、このブログのページでタイトルが指定されている部分は全て、
このTooltipが適用されていることと思います。

<div title='[Tooltipに表示させる文字]'>xxxxxxxx</div>
<a href='#' title='[Tooltipに表示させる文字]'>xxxxxxxx</a>
<span title='[Tooltipに表示させる文字]'>xxxxxxxx</span>
<img src='Image url' title='[Tooltipに表示させる文字]'/>

ブロック領域の場合は、その領域のどこをクリックしても
Tooltipが表示されることになります。

リンクの場合はこのようになります。

span タグの場合も同様に、Tooltipが表示されます。

統一感を持たせたいサイトなどでは、最初に準備しておけば
手間なく使用できるので、有効なTooltipかもしれません。

]]> http://terakonya.sarm.net/wordpress/2007/10/05/94/feed JavaScriptでTooltipを実装する。(1) -CoolTips http://terakonya.sarm.net/wordpress/2007/10/03/93 http://terakonya.sarm.net/wordpress/2007/10/03/93#comments Tue, 02 Oct 2007 15:43:26 +0900 iras http://terakonya.sarm.net/wordpress/2007/10/03/93

リンクにマウスオーパーしたときに吹き出し表示されるTooptip。
さまざまな種類のTooptipが出回っております。

使い方はほとんど同じとなると思うのですが、
いろいろなデザインがあるので、試していってみたいと思います。

[CoolTips]
http://www.wildbit.com/labs/cooltips/
prototype.jsベースのツールチップライブラリです。
角が丸く、半透明のツールチップを表示します。
画像を使用していないので、扱いやすく、軽量です。

[ファイルのダウンロードと設定]
http://www.wildbit.com/labs/cooltips/
からCoolTips 1.0をダウンロードします。（ダウンロードファイルはtooltips1.0.zip）
中にはCoolTips用のJavascriptファイル・CSSファイルのほか、
prototypeとscript.aculo.usのJavascriptファイルが入っています（libフォルダ）
prototypeやscript.aculo.usを既に使用している場合は、libフォルダのアップは不要です。
既にアップしているフォルダ先を指定することになります。
// JavaScriptの指定
<script type="text/javascript" src="xxx/prototype.js"></script>
<script type="text/javascript" src="xxx/scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="xxx/tooltips.js"></script>
// CSSの指定
<link rel="stylesheet" href="xxx/tooltips.css" type="text/css" media="screen" />

[実装方法]
tooltipを適用したい部分にidまたはclass指定をし、
idまたはclassを引数としたTooptipオブジェクトを生成します。
idの場合は引数をid名とすればOKです。
// リンク部分
<a href='#' title='Tooptipで表示させたい文字列' id='test'>Click here</a>
// Tooptipオブジェクトを生成
<script type="text/javascript">
new Tooltip('test');
</script>
Click here

class指定の場合は、次の関数を使用してTooptipオブジェクトを生成します。
// リンク部分
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>Click here</a>
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>クリック★</a>
<a href='#' title='Tooptipで表示させたい文字列' class='test_class'>☆☆☆☆</a>
// Tooptipオブジェクトを生成
<script type="text/javascript">
$$(".test_class").each( function(links) {
new Tooltip(links, {backgroundColor: "#FF80B8", borderColor: "#E60066", textColor: "#A10048", textShadowColor: "#FFBFDC"});
});
</script>Click here  クリック★  ☆☆☆☆

[関数解説]
◇$$("ｘｘｘ")：
　　class名を入れます。CSSで指定するときと同じ方法です。
◇.each：
　　prototype.jsのeach関数です。指定したclass名のオブジェクトを走査します。
◇ function(ｘｘｘ)：
　　Tooptipを生成するためのfunctionを定義しています。
　　引数となるオブジェクト名は任意です。Tooptipオブジェクトを生成するときの引数になります。

[Tooptipカスタマイズ]
上のサンプルでもわかるように、表示するTooptipの色は自由にカスタマイズできます。
Tooptipオブジェクトを生成するときの二番目の引数に配列で定義します。
次のオプションの指定が可能です。

＜tooltips.cssでデフォルト設定されているもの＞
◇ backgroundColor ：Tooptipの背景色
◇ borderColor ： Tooptipを囲むボーダー色
◇ textColor ： Tooptipの文字色
◇ textShadowColor ： Tooptipの文字の影となる色（Safariのみ）

＜その他＞
◇ maxWidth ： Tooptipの最大横幅（pixels） デフォルトは250px
◇ delay ： マウスオーバーしてからTooptipを表示するまでの時間（ミリ秒） デフォルトは250
◇ mouseFollow ： カーソルの移動と共にTooptipを移動させる（true/false） デフォルトはtrue
◇ opacity ： Tooptipの透明度 デフォルトは75
◇ appearDuration ： 表示エフェクトにかかる時間（秒） デフォルトは0.25
◇ hideDuration ： 非表示エフェクトにかかる時間（秒） デフォルトは0.25
<script type="text/javascript">
new Tooltip('terako' , {backgroundColor: "#008F00", borderColor: "#00CC00", textColor: "#BFFFBF", textShadowColor: "#80FF80" , maxWidth:150 , delay:500 , mouseFollow:false , opacity:50 , appearDuration:1 , hideDuration:2});
</script>
全てをカスタマイズしてみるとかなり感じが変わりますね。お好みのTooptipができそうです。
寺子屋未満をよろしくお願いします。
]]> http://terakonya.sarm.net/wordpress/2007/10/03/93/feed Edge.jsを使う。(2) http://terakonya.sarm.net/wordpress/2007/08/30/89 http://terakonya.sarm.net/wordpress/2007/08/30/89#comments Thu, 30 Aug 2007 14:46:09 +0900 iras http://terakonya.sarm.net/wordpress/2007/08/30/89 [Edge.js]
http://www.netzgesta.de/edge/
画像にマスク効果をつけるスクリプトです。
適用したい画像サイズにマスク画像を合わせてくれるので、
サイズの違う画像も一つのマスク画像で効果を出せて、便利です。
前回、基本設定を説明したので、今回は残っているオプションクラスを説明します。

前回に引き続き、今回もこの画像です。濃い目なのでマスク効果がわかりやすいと思います。
colors Photo By XA from Zorg
colors Photo By XA

【画像を使わずにマスク効果：inbuilt】
inbuiltクラスを指定すると、マスク画像を使わずに、
周囲をソフトに見せる効果を得ることができます。
最初にマスク画像の配列を設定しない場合は、この効果が自動的に適用されます。<img src='xxx' class='edges inbuilt'/> colors Photo By XA
マスク画像でサイトが重くなるのが気になる場合、この効果だけを使うのもありですね。

【マスク効果を適用させる範囲を決める：isize】
isize[数値]で、画像の周囲どこまでマスク効果を適用させるかを設定できます。
最小は0、最大は画像の幅の半分です。デフォルトは画像の幅10％分です。（単位：ピクセル）
今回の画像幅は360pxなので、最大180pxで設定することになります。
このように自作したマスク画像を画面全体に適用させることもできます。

◆自作マスク１
terakomask<img src='xxx' class='edges isize180'/>
colors Photo By XA

◆自作マスク２
terako2
<img src='xxx' class='edges isize180'/>
colors Photo By XA
自分で作成した画像に、一律で自分のサインを入れたり、何てこともできそうですね。

]]> http://terakonya.sarm.net/wordpress/2007/08/30/89/feed Edge.jsを使う。(1) http://terakonya.sarm.net/wordpress/2007/08/29/82 http://terakonya.sarm.net/wordpress/2007/08/29/82#comments Wed, 29 Aug 2007 14:18:41 +0900 iras http://terakonya.sarm.net/wordpress/2007/08/29/82 [Edge.js]
http://www.netzgesta.de/edge/
画像にマスク効果をつけるスクリプトです。
自分でマスキング画像を作れば、様々にアレンジすることができます。

【ダウンロードと設定】
Edge.js→Downloadから、[edge.js 1.1]をダウンロード。
（ダウンロードファイル名は[edge.zip]）
フォルダを解凍すると、サンプルとスクリプト、マスク画像が同胞されています。
マスク画像とスクリプトを残したフォルダを適当な場所に配置し、
HTMLにスクリプトの設定をします。

◆マスク画像の設定
プログラム内で画像を保持させる配列を作成する必要があります。
以下のコードをヘッダに書き加えます。<script type="text/javascript">
var mask2load = new Array();
mask2load[0] = [マスク画像のsrc]
mask2load[1] = [マスク画像のsrc]
mask2load[2] = [マスク画像のsrc]
mask2load[3] = [マスク画像のsrc]
mask2load[4] = [マスク画像のsrc]
・・・・・
</script>
[edge]フォルダ内の[masks]にデフォルト画像があります。
軽めのgif画像と、高画質のpng画像があるのでお好みで。
マスクは以下の5種類。
crippleedge frizzedge softedge splatteredge waveedge
◆スクリプトの設定
画像設定のあと、次のコードでスクリプトの宣言をします。<script type="text/javascript" src="xxxx/edge.js"></script>

【基本設定：edge】
今回はこの画像です。濃い目なのでマスク効果がわかりやすいと思います。
colors Photo By XA from Zorg
colors.jpg

マスクを適用させるには、imgに[edges]クラスを指定します。<img src='xxx' class='edges'/>
colors Photo By XA

【指定マスク画像を適用させる：imask】
imask[番号]で指定マスク画像を適用させることができます。
指定する番号は、画像の配列を作成したときの添え字です。
デフォルトは0番目のマスクとなります。<img src='xxx' class='edges imask0'/> colors Photo By XA
<img src='xxx' class='edges imask1'/> colors Photo By XA
<img src='xxx' class='edges imask2'/> colors Photo By XA
<img src='xxx' class='edges imask3'/> colors Photo By XA
<img src='xxx' class='edges imask4'/> colors Photo By XA

次回、少ししかありませんが、オプションクラスについて説明します。

]]> http://terakonya.sarm.net/wordpress/2007/08/29/82/feed Reflex.jsを使う。(2) http://terakonya.sarm.net/wordpress/2007/08/28/81 http://terakonya.sarm.net/wordpress/2007/08/28/81#comments Tue, 28 Aug 2007 11:56:31 +0900 iras http://terakonya.sarm.net/wordpress/2007/08/28/81 [Reflex.js]
http://www.netzgesta.de/reflex/
今回は鏡面効果＋立体効果を与えるスクリプトです。
前回に引き続き、オプションクラスを使ってみたいと思います。

今回も画像はこちら。デフォルトの設定はこのようになります。
続、田舎の綺麗① Photo By 南国の風＆kao from Zorg
続、田舎の綺麗①

【影の透明度を設定：iopacity】
鏡面効果となっている影の透明度を設定できます。
iopacity[数値]の形式でクラス指定します。（単位はパーセント）
最大100、最小0、デフォルト設定は33となっています。<img src='xxx' class='reflex iopacity90'/>
続、田舎の綺麗①

【画像に枠をつける：iborder】
画像に枠をつけることができます。
iborder[数値]で枠の幅を指定します。（単位はピクセル）
最大100、最小0、デフォルト設定は0となっています。<img src='xxx' class='reflex iborder10'/>
続、田舎の綺麗①

【枠の色設定する：icolor】
iborderを使用する場合にセットで使うことができます。
icolor[6桁のカラーコード]を指定します。指定しない場合は■#F0F4FFです。
（・・・と記載されていますが黒い枠が表示されるようです。）
オレンジ色の枠■#FFBB55をつけてみます。
続、田舎の綺麗①

【効果の利用】
立体効果は横並びにすると素敵になりますね。
バッチはツールを使って作りました。
[Fresh Badge Generator]
http://www.freshbadge.com/

sample1sample2sample3sample4sample5

このようなスクリプトは新しいものがどんどんでてきて、
選べる手段が増えてきますね。楽しいです。

]]> http://terakonya.sarm.net/wordpress/2007/08/28/81/feed Reflex.jsを使う。(1) http://terakonya.sarm.net/wordpress/2007/08/27/80 http://terakonya.sarm.net/wordpress/2007/08/27/80#comments Mon, 27 Aug 2007 14:58:17 +0900 iras http://terakonya.sarm.net/wordpress/2007/08/28/80 [Reflex.js]
http://www.netzgesta.de/reflex/
以前、鏡面効果を与えるスクリプトを紹介しましたが、
今回は鏡面効果＋立体効果を与えるライブラリを使ってみます。

【ダウンロードと設定】
Reflex.js→Downloadから、[reflex.js 1.1]をダウンロード。
（ダウンロードファイル名は[reflex.zip]）
フォルダ内にあるJavaScriptファイル（reflex.js）をHTMLに取り込みます。<script type="text/javascript" src="xxxx/reflex.js"></script>

今回はこの画像を使用します。美しすぎます。
続、田舎の綺麗① Photo By 南国の風＆kao from Zorg
20070827photo.jpg

【基本設定：reflex】
鏡面＋立体効果を出すには、適用したいimgに[reflex]クラスを指定します。<img src='xxx' class='reflex'/>
続、田舎の綺麗①
指定できる画像の最小サイズは32＊32。

オプションクラスも色々あります。

【画像と影の距離：idistance】
画像と鏡面効果となっている影の距離を設定できます。
idistance[数値]の形式でクラス指定します。（単位はピクセル）
最大100、最小0、デフォルト設定は0となっています。<img src='xxx' class='reflex idistance20'/>
続、田舎の綺麗①

【影の長さを設定：iheight】
鏡面効果となっている影の高さを設定できます。
iheight[数値]の形式でクラス指定します。（単位はパーセント）
最大100、最小0、デフォルト設定は33となっています。<img src='xxx' class='reflex iheight70'/>
続、田舎の綺麗①

【立体効果の方向を指定：itiltright・itiltnone・itiltleft】
立体効果の方向を指定しない場合、
「右が奥になる」→「正面」→「左が奥になる」が自動的に繰り返されます。
（上の三枚は方向を指定していないのでデフォルトで別方向となっています。）
方向を決めたい場合は、以下のクラスを指定します。

itiltright：右が奥になる
itiltnone：正面（立体効果なし）
itiltleft：左が奥になる<img src='xxx' class='reflex itiltleft'/>
続、田舎の綺麗①

次回は残りのオプションクラスについて解析していきます。

]]> http://terakonya.sarm.net/wordpress/2007/08/27/80/feed