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

全ての画像にマウスのカーソルが乗っかった時にgrayのフィルターをかけて、カーソルが画像から外れた時にgrayのフィルターをといて元のカラー画像にしたいと思っています。
これをほぼCSSのみでデザインを作るはてなダイアリーで出来ますでしょうか?
ちなみに全ての画像にその処理をしたいので、img{〜〜〜〜}の構文で教えていただけると大変助かります。どうか教えてください。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/10/16 03:25:35
  • 終了:--

回答(4件)

id:DenGaX No.1

DenGaX回答回数32ベストアンサー獲得回数02004/10/17 06:27:51

ポイント10pt

http://msdn.microsoft.com/workshop/author/dhtml/reference/events...

onmouseover Event (A, ADDRESS, APPLET, ...)

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>

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

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

id:inuhana No.2

inuhana回答回数15ベストアンサー獲得回数02004/10/16 06:57:11

ポイント20pt

http://kei.serio.jp/kowaza/#26

Kei Laboratory : HP作成小技集

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

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

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

id:Mosh

自作するHTMLファイルだったらわかるのですが、はてなダイアリーだとすべて○○○{○○:○○;}で書かなければならないと思うので、苦労しています。そっちの方法で出来れば教えていただければ助かります。

2004/10/17 02:44:09
id:DenGaX No.3

DenGaX回答回数32ベストアンサー獲得回数02004/10/16 13:21:01

ポイント20pt

URLはダミーです

a:link img{

filter: Gray;

}

a:visited img{

filter: Gray;

}

a:hover img{

filter:none;

}

ではダメでしょうか?

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

id:Mosh

ありがとうございます!リンクの入った画像には適応できました。リンクが入っていない画像にも適応したいので、できればそちらももしよければお願いします。

2004/10/17 02:48:06
id:siachan No.4

siachan回答回数80ベストアンサー獲得回数142004/10/16 13:22:19

ポイント20pt

http://d.hatena.ne.jp/keyword/%a4%cf%a4%c6%a4%ca%a5%c0%a5%a4%a5%...

はてなダイアリーガイド「CSSセレクタ - calendar2photoモジュール」とは - はてなダイアリー

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

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

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

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

id:Mosh

ありがとうございます。未熟で知識が足りないので、もしよかったら具体的な例を教えていただけますでしょうか?

2004/10/17 23:25:54

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

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません