透過pngのボタン

一番前の一番左の受講生がナビボタンで苦労していたので!!

png24で制作した透過pngの見え方と、画像にa:hoverの機能を持たせるjsの説明です。

サンプル

※サンプルは別窓で出ます。

上のURLの3つのボタンのマウスオーバー画像は透過pngでなおかつ、
ボタン部分が半透明になっているpng画像を使用しています。
制作方法は、photoshopのレイヤープロパティで透明度を100%から落とすだけです。
(70%〜40%位)

一番上は、普通にcssでaとa:hoverにバックグラウンド画像を指定しています。
下の2枚は、imgをhtml側で貼っていますが、a:hoverの代わりにマウスオーバー画像をjsで呼び出しています。
この働きをするalphafilter.jsを落として使用してください。