カテゴリー:Javascript関連

リスト表示へ

手軽に画像のロールオーバー効果を実装するJavaScript

2009年4月14日 10:48

ロールオーバーイメージ

これは、以前に公開していたスクリプトの改善版です。
以前の記事:画像のロールオーバーを自動化するJavascript では、実行するために body 要素に onload で関数を指定する必要がありましたが、こちらは読み込ませるだけで実行されます。

以前から、自分で作ったくせに いちいち body 要素に onload を指定するのがめんどくさいなーと思っていたので、それを作りなおしました。

手軽に画像のロールオーバー効果を実装するJavaScript デモ

JavaScript ファイルの読み込み

人によってはロールオーバー用の画像のファイル名に_on以外をつけている人もいると思いますので(たとえばimg_over.gifみたいな)、URL 引数にパラメータを渡すことでロールオーバー用画像のタイプを設定できるようにしました。
読み込み時に以下のようにすることで、どんなファイルを読み込むかを指定できます。

上記の?type=_overの部分がパラメータです。
こうすることで、たとえば通常時の画像のファイル名がimg.gifだったとすると、ロールオーバー時にimg_over.gifが読み込まれることになります。

デフォルトの設定では_onがついた画像を表示します。
もしロールオーバー用の画像のファイル名を_on以外で使っている場合は、上記のようにパラメータを設定してください。

HTML 側の指定は、ロールオーバーを実装させたい img 要素に対してclass="rollover"とクラスを指定するだけです。
クラスを指定した画像のロールオーバー(マウスオーバー)時に、画像の URL を読み取り、JS 読み込み時に設定したパラメータ(もしくは初期値)を利用してロールオーバー用の画像と差し替えます。

画像置換がいらないシンプルなロールオーバーエフェクト用Javascriptライブラリ

2009年2月25日 14:10

さて、またしても JavaScript の記事です・・。
今回、このライブラリを作成した理由として、マウスーバー時の画像と、通常時の画像の 2 種類を用意することに手間を感じたためです。n

ちょっとしたバナー等だとわざわざマウスオーバー時に画像を入れ替えるほどのモノでもないし、でもリンクしているって分かってもらうために何かしらのエフェクトを入れたい・・・というような場合に使えるライブラリとなっています。n

画像置換がいらないシンプルなロールオーバーエフェクト デモ

使い方は簡単です。まず、以下の JS ファイルを読み込ませ、ロールオーバーエフェクトを実装したい img 要素のクラス名にsimplerolloverを指定するだけです。n

JS ファイル

オプションとして、JS ファイルの読み込み時に

と border と color の二つのパラメータを渡すことで、それぞれ枠の太さと色を指定することができます。(もちろん、どちらか一方だけの指定でも大丈夫です)n

指定できる値は CSS で指定するものと同じものが使えます。(例:#f00など)
border への指定は 整数値のみ指定が可能です。n

動作確認:IE6, IE7, Firefox2, Firefox3, Safari, Opera

IE6で透過PNGを手軽に使えるJavascriptライブラリ「DD_belatedPNG」

2009年2月12日 23:47

site_DD_belatedPNG.jpg

今回はサイト製作に便利な JavaScript ライブラリの紹介です。

DD_belatedPNG

IE6 では透過 PNG(PNG-24 PNG-32 の間違いでした;)を使えません。
いちおう画像を表示することはできますが、透過部分が反映されません。

しかし、代替処理として「AlphaImageLoader」という CSS の filter を使うことで使うことが可能です。
ですがこれ、ActiveXの問題なのか、指定している透過PNG画像のドメインが違うとうまく反映されませんでした。

しかし今回紹介するJavascriptライブラリは、VMLという技術を使ってPNG画像の透過を実現します。

そのため、ドメインなどの問題もなく、しかも指定も楽でimg要素、CSSともに使用できるためとても便利です。

しかしながら、やはりこちらも使用には何点か注意点があります。
CSSの背景にPNG画像を指定した場合は問題ありませんが、img要素に(つまり通常の画像として)指定した場合、いくつかのライブラリで実装する、フェードアウトやフェードインの視覚的効果が実行されません。

推測では、filter 機能が使えないために透明度が変更できないのだと思います。
なので、もしこのライブラリを使う場合は CSS の背景として使うのが無難です。
簡単にデモを作ってみたので見てみてください。

使い方

スクリプトファイルを読み込んだあと、「DD_belatedPNG.fix('.png_bg');」で透過 PNG を使用している要素を指定します。
指定の仕方は簡単で、CSS セレクタと同じように指定ができます。
複数指定する場合は、やはり CSS と同じようにカンマ区切りで列挙します。

合わせて読むと役に立つかもなエントリー

前の10件 1  2