Memo for a Moment

JcapのCaptcha( キャプチャ、"Completely Automated Public Turing test to tell Computers and Humans Apart" )技術を利用した画像認証を実装してみた。

ランダムに表示されるイメージ画像( 191枚※以下の例では、10枚に抑えてあります )を見て入力された文字列を、md5で暗号化、比較するみたい。
これを利用すれば、コメントやメールなどのスパムチェックが簡単に利用できるのでイイ感じ♪

デモ

※今回の例では、サブミットされた際に強制的にfalseを返してあります。実際に利用される場合は、formの要素を正しく記述しjudgeResult()は外して下さい。

簡単更新出来るホームページ

エーハチネット

prototype.jsに基づくAjaxライブラリの一つであるscript.aculo.us

スライダーの導入方法

prototype.js, scriptaculous.js, slider.jsを使う。で読み込みの際に、scriptaculous.js?load=読み込みたいjsをコンマで区切ると書けば他のjsファイルは読みこまないらしいのでそうしてみた。 slider.jsだけでいいみたい。。。とほほ

オブジェクトの作成方法

new Control.Slider( つまみのid, 後ろの板のid,
{
sliderValue : 小数, ← 初期値
range:$R(最小値, 最大値), ← 取り得る値の範囲
onChange:function(value){ ← つまみが止まったら実行される
〜
},
onSlide:function(value){ ←つまみが動かされたら実行される
〜
}
} );

htmlの定義

＜div="後ろの板のid"＞＜div="つまみのid"＞＜/div＞＜/div＞とすればＯＫ

後はこれをポップアップで表示して、sliderオブジェクトを作成。そのときonChange,onSlideにスライダーの値を画像に反映させるコードを追加してあげれば、、、
※ポップアップ表示の仕方はこちら

デモ

アフィリエイトはエーハチネット

ホームページ制作ＡＳＰ

最近ポップアップばかりで少し飽きてきたんだけど、、、今回はGoogle Mapsのポップアップをしてみよう。。。
※ポップアップ表示の仕方はこちら

Google Mapsの導入方法は

• Google Maps APIでkeyの取得
• 取得後、サンプルHTMLを貼り付ければできあがり

だいたい、こんな感じかな？

シナリオは
住所を表すテキストクリック→地図ポップアップ[→住所再検索]→ポップアップ閉じる
という流れにしてみよう。そのためにはポップアップ画面に住所入力ボックスを作ってと、、、
※ポップアップ表示の仕方はこちら

デモ

東京都渋谷区１−１

2,980円でホームページ制作

エーハチネット