はてなダイアリーを使っています。

CSSだけでは今のところその機能はありません。

そのうちimg:hover等が使えるようになるのかもしれませんが今のところは<a>タグで囲った画像のみです。

対策としては、<A href=”#”>でimgタグを括ってしまえば良いと思われます。

IEのjavascriptなら後付けでonmouseoverイベントを無理矢理付ける方法が有るのですが、<script>をはてなダイアリーのフッターに入れてみたらそのまま出てきてしまいました^^;。

(URLは当該のプロパティのリファレンスページです(英語))

もしスクリプトが使用できるなら、HTMLの最後に

-------------------------------

<script language=”JScript”>

//<!--

if(document.all) //IE以外で”JScript”を認識しないブラウザで動かないようおまじない

{

var a = document.all.tags(”IMG”);

for (i=0; i<a.length; i++)

{

a[i].onmouseover = onmouse;

a[i].onmouseout = outmouse;

a[i].style.filter=”progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)”;

}

}

function onmouse()

{

this.style.filter=”progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)”;

}

function outmouse()

{

this.style.filter=”progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)”;

}

//-->

</script>

-------------------------------

このようなスクリプトを入れることでできます。

<IMG src=”***.png” style=”filter:alpha(opacity=50);” onMouseover=”this.filters[’alpha’].opacity=100” onMouseout=”this.filters[’alpha’].opacity=50”>

src は始めに表示しておく画像、 opacity=** は透過度で % で指定し、100% が元の画像の濃さになります。

画像の透過度を変える方法ですが、こういうのでいいでしょうか。

URLはダミーです

a:link img{

filter: Gray;

}

a:visited img{

filter: Gray;

}

a:hover img{

filter:none;

}

ではダメでしょうか？

リンクを張った画像にしか出来ませんが……

残念ながら、img{ } のみで済ます方法はなさそうです。

はてなのカレンダーで利用されてますが、スタイルシートに

a:hover img {filter: Gray();}

と記述して、img srcをa href=”#”とでもしてくくってしまうのはいかがでしょうか。