« 2008年4月 | トップページ | 2008年6月 »

2008年5月の5件の記事

2008.05.31

マウスオーバー画像を簡単に作るJavaScript

知っていると結構便利です|imagelink.js

バタバタしている内に結構間が空いてしまいました。
またコツコツと更新していきますので、よろしくお願いします。
さて、今回はweb creators 2008年4月号の「WEBデザイン TIPS&TRICKS」に載っていたJavaScriptですが、知っていると結構便利に使えると思うので紹介してみます。

ライブラリは、「Style Your Image Links」というページからダウンロードでき、このライブラリを使うと、簡単にマウスオーバー時の画像を作ることができます。
仕組みは、マウスオーバーされた画像に「.imageOver」というクラス名を付けられたspan要素を重ねるようです。
なので、今回紹介する方法以外にも応用が利くと思います。

では、サンプルです。

続きを読む "マウスオーバー画像を簡単に作るJavaScript"

| | コメント (0) | トラックバック (0)

2008.05.14

入力した値をチェックするJavaScript

リアルタイムに入力した値をチェック|Live Validation

以前に「JavaScriptでユーザーに親切なフォーム入力」というタイトルで、フォーム入力時に空欄や形式のチェックを行うスクリプトを紹介しましたが、web creators 2008年5月号の「WEBデザイン即効テクニック76」に載っていたスクリプトもなかなか便利なので紹介してみます。

スクリプトは、「Live Validation」からダウンロードでき、このスクリプトを使うと、リアルタイムに入力した値をチェックしてくれるようになります。
ただし、難点というかなんというか…。
例えばメールアドレスなんかだと、
xxx@xxx.xx …打ち込んで、メールアドレスの形式だと確認できるまで、OKだと判断してくれません。
なので、Webに対するリテラシーが高くない人達をターゲットにする場合は、利用しない方が良いかもしれないです。
ただ機能的には、必須・数字・メールアドレス・文字数…などをチェックしてくれるので、使い勝手は結構良さそうです。

では、サンプルです。

続きを読む "入力した値をチェックするJavaScript"

| | コメント (0) | トラックバック (1)

2008.05.13

Safari用のCSSハック

モダンブラウザ用にCSSを記述していても、Safariだけ表示がズレてしまうといったコトがごく希にありませんか?
IE関係のハックやOperaのハックはいろんなトコロで紹介されていますが、Safariのハックもあるんですね。…世の中、いろんなコトを教えてくれる人がいるので助かります!
…というコトで、このブログでも紹介してみます。

html[xmlns*=""] body:last-child 要素名 {
   Safariのみに適用させるスタイル
}
といったように、適用させたい要素名の前に
html[xmlns*=""] body:last-child を付けてスタイル定義するだけでOKです。

その他にも、BLOG × WORLD ENDINGさんの「CSSハック」というページには、いろいろなハックが紹介されていますので、興味のある方は一度ご覧になると良いと思います。

| | コメント (0) | トラックバック (0)

2008.05.10

XMLデータをWebページに表示する

Spryを利用してXMLデータをページに表示

ちょっと古いネタですが、web creators 2007 10月号の「TIPS&TRICKS」に載っていたSpry framework for Ajaxを使ってXMLデータをWebページに表示させる仕組みを紹介してみます。

頻繁に更新するデータなどを実際のページから切り離してXMLで管理できるので、クライアントさんが更新作業をする場合などに提案できるかもしれません。
ただし、ソースコードを編集できるクライアントさんじゃないと難しいと思います。また、実際のページのソースは変更されず元のままなので、SEOを重視する場合は不向きです。
まあ、iframでページとは切り離してデータを管理する方法に似ているでしょうか? 更新システムをちゃんと作るのであれば、CMS Designer等のCMSツールを使用した方が良いでしょう。

では、サンプルです。

続きを読む "XMLデータをWebページに表示する"

| | コメント (0) | トラックバック (0)

2008.05.05

JavaScriptでユーザーに親切なフォーム入力

Ajaxによるフォーム入力作業のサポート|Web Designing 5月号

フォーム入力に関するJavaScriptはいろいろありますが、Web Designing5月号「Ajaxハジメマシタ」に載っていたスクリプトもなかなか便利そうなので紹介してみます。

サンプルでは3つのライブラリが盛り込まれ、ユーザーに親切なフォーム入力が作れます。どんな機能があるかというと…、
1)空欄と入力データ形式をチェック(JSVallidareライブラリ)
2)郵便番号から住所を自動入力(AjaxZip2.0ライブラリ)
3)日付の入力時にカレンダーを表示(protocalenderライブラリ)
…以上の3つです。

早速、サンプルはこちらです。

続きを読む "JavaScriptでユーザーに親切なフォーム入力"

| | コメント (0) | トラックバック (2)

« 2008年4月 | トップページ | 2008年6月 »