人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: Mosh
●カテゴリ:はてなの使い方 コンピュータ
✍キーワード:CSS はてなダイアリー カラー カーソル デザイン
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● DenGaX
●10ポイント

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>

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

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


2 ● inuhana
●20ポイント

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% が元の画像の濃さになります。

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

◎質問者からの返答

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


3 ● DenGaX
●20ポイント

http://www.google.com/

Google

URLはダミーです

a:link img{

filter: Gray;

}

a:visited img{

filter: Gray;

}

a:hover img{

filter:none;

}

ではダメでしょうか?

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

◎質問者からの返答

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


4 ● siachan
●20ポイント

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=”#”とでもしてくくってしまうのはいかがでしょうか。

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ