これはこれで見た目もいいし目立たせるのに便利なのですが、
画像以外でも、
・入力フォーム内での未入力のテキストボックスを目立たせたい
・規約等どうしても読んで欲しい文章を目立たせたい
といったこともありますよね。
そんな時に使えそうなスクリプトを紹介します。
seekAttentionというスクリプトです。
実践ページはこちらになります。
【jQuery】ページ内で注目させたい部分を強調するスクリプトを試してみた
前回同様jQueryを利用したスクリプトです。
簡単に説明しますと、あらかじめ強調させたい部分にidを付けておき何かアクションを起こした際にある条件に合致したら強調させたいidを呼んで強調させる（id以外の部分を暗転させるイメージ）という感じです。
１．利用できるオプションの一覧
このスクリプトでは以下のオプションを指定する事が出来ます。
【container】
コンテナ名で囲まれた部分を強調します。
例：
コンテナ部分を強調
【color】
非強調部の色を変更する事が出来ます。
例：
非強調部分の色を変える
【opacity】
非強調部の暗転の濃さを設定できます。
例：
$('#elem').seekAttention({
opacity: 0.4
});
【fade】
フェードイン・アウトの有無を設定できます。
例：
$('#elem').seekAttention({
fade: false
});
【fadeSpeed】
フェードイン・アウトの速度を設定できます。
例：
$('#elem').seekAttention({
fadeSpeed: 800
});
【hideOnClick】
強調後、画面クリックでは強調解除しないように設定できます。
例：
$('#elem').seekAttention({
hideOnClick: false
});
【hideOnHover】
強調後、強調部へのオンマウスでは強調解除しないように設定できます。
例：
$('#elem').seekAttention({
hideOnHover: false
});
【pulse】
強調部の点滅の有無を設定できます。
例：
コンテナ部分を強調（点滅無し）
【blur】
非強調部の暗転時にぼかすかぼかさないかの設定ができます。
例：
$('#elem').seekAttention({
blur: false
});
【pulseSpeed】
強調部の点滅速度を変更できます。
例：
点滅のスピードを変える
【paddingTop】
【paddingRight】
【paddingBottom】
【paddingLeft】
強調部のpaddingを設定できます。
例：
リンクを強調
２．jQueryのダウンロード＆設置
jQueryのjsファイルはこちらからダウンロード。
ダウンロードしたファイルは任意のディレクトリへアップロードしてください。
３．seekAttention.jquery.jsのダウンロード＆設置
seekAttention.jquery.jsはこちらからダウンロード。
jQuery同様、ダウンロードしたファイルは任意のディレクトリへアップロードしてください。
４．効果を設置する
テキストボックスならinputタグの中、コンテナならdivの中、といった部分にid="hoge"を記述し、ボタン押下などのアクション時にそのidに対してseekAttentionを通してあげるという具合です。
基本は
$('#hoge').seekAttention()
でオプションを利用する場合のみ括弧内に
{オプション名: 値}
としてやります。
５．最後に
今回のスクリプトは実際の入力フォーム作成時に利用させていただきました＾＾
未入力テキストフィールドや未選択チェックボックスなどが一目瞭然なのでかなり使えると思います。
ただ、prototypeとjQueryを同時に使う際には、prototype、jQueryのどちらでも使われる
$('id名')
の動作がそれぞれ違う解釈になるようなのでそのまま使うとまともに動いてくれません。
jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）
こちらを参考にしてjQuery側の$()をj$()等に置き換えて利用してください。
何かしら参考になりましたらクリックをよろしくお願いします
なんて思ってました^^
勉強になります♪
こんばんは、トモヒロさん。^^
技術的な事は難しくて・・・
勉強しても分かるようになるとは
思えません・・・<(*＿ ＿)>
しかしいつまでもこれではダメですね。
く(￣△￣)ノガンバレェェェ！！私。(笑)
lightbox2、愛美さんも導入してみてはいかがですか＾＾
IEでは少し動きがぎこちないですがFirefoxではすごく滑らかに動きます。
>> 朱夏さん
こんばんは＾＾
ウェブの技術については好奇心で試しているので勉強しているという感覚は全くないですよ。
思い通りに動くのが楽しくて色々試したくなってしまいます。
いい感じの拡大方法ですね。
これなら、記事も長くならず
スッキリしていいなと
思います。
いつも自分のサイトに応用したいと
あこがれ続けて数ヶ月…
挫折しまくり！
最近はただただ感心するばかりのミミオでございます。
今回のは、ユーザビリティの向上にいいですよね！年末年始休暇に挑戦してみます。
そうですね。
余計な注意書きも必要なくなるかもしれません＾＾
>> ミミオさん
文字ではなく視覚的に注意を促すというのはビジュアル的にもありかなと思います。
ぜひ試してみてください＾＾