About Template

共有テンプレート一覧はこちら

OK

  • カスタマイズ
  • 素材の入れ替え

NG

  • 素材及びテンプレートの再配布
  • 著作権表記及びリンクの削除、改変
  • アダルト・違法・宗教関連のサイトでの使用
  • fc2ブログ利用規約の禁止行為に該当するサイトでの使用

詳細は「テンプレートの利用について」をご覧ください。



スポンサーサイト

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

スポンサーリンク

Jqueryプラグイン・マウスオーバーで変化するもの2種

画像のロールオーバーは、cssの背景画像チェンジで実装していましたが、Jqueryを使うととーっても簡単にできちゃうなんてことを今更知ったのでありました。
テキストを飛ばすのもアクセシビリティ的によくないですしね。
あ、そういえば、それをクリアしつつcssで、という方法もあったのにここに書き忘れていましたね。
いずれ。


画像にマウスオーバーするとキラーンとさせるjQueryプラグイン「jQuery Gloss」

サンプルと内容は上記リンク先を参照。

必要ファイルをダウンロードしてページに読み込ませ、キラーンとさせたい画像を含むdiv要素にclass="gloss"と指定するだけでオーケーというもの。
導入が簡単そうだったので試してみたのですが、
マウスオーバーでキラン☆!
マウスを外したときもキラン☆!
なので、たくさんボタンを並べている場合、あちこちでキラキラしてしまうので、マウスオーバーしている画像をわかりやすくしたかったにも拘らず、かえって分かりづらくなってしまいました(´・ω・`)
単独でキラン☆したい時はよいかもしれませんね。

それと、多分img要素をdivで囲う必要があるみたいです。新たに囲うのは面倒だしタグ的にも綺麗じゃないかなと思って、あらかじめ存在していた要素にclass="gloss"を入れてみたのですが、うまく動かなかったのですよ。


透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」

こちらは、通称「wink」と呼ばれる効果のJqueryを利用したプラグインです。
透明度を変化させて画像の見え方を変えるという性質なので、一つのプラグインなのに変化する速度を変えることで、様々な効果を与えることができるという素晴らしいプラグインです。

こちらは、img要素に直接idやclassをつけて読み込ませるだけという、さらにシンプルなもの。
画像だけではなく、文字にも適応させられるようです。
で、こちらを試してみたらバッチリでした。

単純にマウスオーバーで透明度を変えるだけならcssで可能なので、実は本サイトで利用していたのですが、ちょっと書き換えるだけでもっといろいろな効果が指定できるので、こっちに乗り換えようかしら。


スポンサーリンク

trackback

comment

コメントする

Secret


Profile

Neriko

Author:Neriko
遊ぶべ!道南探検隊

本サイトは「遊ぶべ!道南探検隊」

はこだて・こどもずかん

→ もっと詳しく

最新記事のRSS

Entry+Comment

Tag+Search


Sponsor

Calendar

07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

Link

QRcode

QR

Mailform

Name:
Email:
Title:
Message:


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