jqueryで画像のマウスオーバー

with コメントはまだありません

リンク画像にマウスオーバーして画像を差し替えることはよくあることですが、
従来であれば、Dreamweaverなどで自動で挿入されるjavascriptなどで実現してましたが、非常にソースが長くなり、
メンテナンス性もあまりよくなく嫌いでした。

また、オン/オフの画像を2枚用意することもいくらデザイン重視・使い勝手重視とはいえ、
修正や変更の場合2つの同じ文言を差し替えるという非効率な方法をとらなければならないので、
常日頃悶々としていました。

そこで、jqueryで画像の透過ができるようなので、
下記のようなソースを作ってみました。

$(function(){
$(“a img.alp”).mouseover(function () {
$(this).fadeTo(50, 0.7);
});
$(“a img.alp”).mouseout(function () {
$(this).fadeTo(50, 1);
});
});

これは、リンクイメージ画像にalpというクラスを指定すれば、
その画像はマウスオーバーしたときに70%とまで透過されるというものです。

背景が無地であれば、問題ありません。
まあ、デザイン的にどうかという点はありますが、
あくまでマウスオーバーはリンクであることをしてしているものなので、よほどデザイン的な制約がない限りは、
メンテナンス性なども考慮して取り入れていきたいと思います。

Leave a Reply