こういった場合、例えばマウスオーバーの時とマウスオーバーしていないときの画像を、２つ用意して、cssの「hover」などでマウスオーバーの対応をしている場合があると思います。
この２つ画像をつくるのが以外と大変だったりしますよね。
上記のような対応で画像二つを用意するのが面倒なので…
jQueryの透過をつかってマウスオーバー時に色が変化（透過する）するものをつくってみました。
マウスオーバーのときに画像が半透明になり、またマウスがはずれると元に戻るというものです。
【サンプルはこちら】
http://web-directors.net/sampleonmause/sample.html
-----------------------------
【１】
jQueryファイルの読み込み「jquery.js」と
マウスオーバーした際の透過の設定のファイル「ollover.js」
をヘッダータグ内に記載します
記載の順番は「jquery.js」を上に記載して「ollover.js」をその下に書きます
（http://web-directors.net/sampleonmause/sample.html
のサンプルと同じようなかたちで記載してください）
【２】
今度はHTMLのソースのほうで、
マウスオーバーさせたい画像にclass で「overimg」と書きます
（こちらも http://web-directors.net/sampleonmause/sample.html
のサンプルのソースを見て頂き同じようなかたちで記載してください）
-----------------------------
作業自体は以上で終了です
class で「overimg」とかいた画像はマウスを上にもっていくと画像が透過します。
あとは、それぞれのボタンにリンクをつけたりしたければ、透過する画像とは関係しにつけられます。
また画像だけでなく「div」などのタグに対してもこの半透明にする効果は有効ですので「div」にclass で「overimg」といれればオンマウスで半透明になります
ページ上の色々なボタンのマウスオーバー用をわざわざ画像でつくったりせず、省力化できるかもしれませんね。
ollover.js の内容はjQueryのサイトなどに載っているので、そちらを参考にしていただくと透過のパーセンテージや動きの速度を変更できます
