ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

オンマウスで画像の色を変更(透過)を簡単に行うjQuery

サイトを制作する際にナビゲーションや、ボタンを、マウスオーバー時に色を変えたりする処理が必要になる場合がありますよね。

こういった場合、例えばマウスオーバーの時とマウスオーバーしていないときの画像を、2つ用意して、cssの「hover」などでマウスオーバーの対応をしている場合があると思います。
この2つ画像をつくるのが以外と大変だったりしますよね。

上記のような対応で画像二つを用意するのが面倒なので…
jQueryの透過をつかってマウスオーバー時に色が変化(透過する)するものをつくってみました。

マウスオーバーのときに画像が半透明になり、またマウスがはずれると元に戻るというものです。

【サンプルはこちら】
http://web-directors.net/sampleonmause/sample.html

-----------------------------
【1】
jQueryファイルの読み込み「jquery.js」と
マウスオーバーした際の透過の設定のファイル「ollover.js」
をヘッダータグ内に記載します

記載の順番は「jquery.js」を上に記載して「ollover.js」をその下に書きます
http://web-directors.net/sampleonmause/sample.html
のサンプルと同じようなかたちで記載してください)

【2】
今度はHTMLのソースのほうで、
マウスオーバーさせたい画像にclass で「overimg」と書きます
(こちらも http://web-directors.net/sampleonmause/sample.html
 のサンプルのソースを見て頂き同じようなかたちで記載してください)

-----------------------------
作業自体は以上で終了です

class で「overimg」とかいた画像はマウスを上にもっていくと画像が透過します。

あとは、それぞれのボタンにリンクをつけたりしたければ、透過する画像とは関係しにつけられます。
また画像だけでなく「div」などのタグに対してもこの半透明にする効果は有効ですので「div」にclass で「overimg」といれればオンマウスで半透明になります

ページ上の色々なボタンのマウスオーバー用をわざわざ画像でつくったりせず、省力化できるかもしれませんね。

ollover.js の内容はjQueryのサイトなどに載っているので、そちらを参考にしていただくと透過のパーセンテージや動きの速度を変更できます



Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集