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

マウスオーバーでモノクロのテーブルをフェードインさせて、クリックあるいはフェードインするたびに色が濃く付け加えられることはできますでしょうか。

●質問者: abank
●カテゴリ:ウェブ制作
✍キーワード:クリック マウスオーバー モノクロ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mars
●100ポイント

http://www.nurs.or.jp/~sug/html/java/filter.htm

WWW講座〜Java Applet

サンプルを書いて見ました。IEでしか動きません。


「クリック」の件はちょっとどういう意味かわかりませんでしたので、マウスを乗せている間、濃くなり続け、マウスをはずすととまります。(再びマウスを乗せれば続けて濃くなります。)


グレースケール→カラーのフィルタが見つからなかったのでモノクロのテーブルの上に同じテーブル(透明)を

かぶせ、上のテーブルの透明度を下げて色付く様子を再現しています。


<html>

<head>

<script type=”text/javascript”>

var TimerId;

function fadein_start(){

var Obj = document.all[’T001’];

if(OpacityPlus(Obj))

TimerId = setTimeout(fadein_start,100);

}

function fadein_stop(Oid){

clearTimeout(TimerId);

}

function OpacityPlus(Obj){

var Opacity=Obj.filters[’alpha’].Opacity;

if( (Opacity += 2)>100)Opacity=100;

Obj.filters[’alpha’].opacity = Opacity;

if(Opacity<100)return true;

else return false;

}

</script>

</head>


<body>


<div style=”position:relative;”>

<table border style=”filter:gray();position:absolute;top:0;left:0;”>

<tr><td bgcolor=”red”>セル</td><td bgcolor=”purple”>セル</td></tr>

<tr><td bgcolor=”pink”>セル</td><td bgcolor=”skyblue”>セル</td></tr>

</table>

<table border style=”filter:alpha(opacity=0);position:absolute;top:0;left:0;”

id=”T001” onmouseover=”fadein_start(this)” onmouseout=”fadein_stop(this)”>

<tr><td bgcolor=”red”>セル</td><td bgcolor=”purple”>セル</td></tr>

<tr><td bgcolor=”pink”>セル</td><td bgcolor=”skyblue”>セル</td></tr>

</table>


</div>


</body>

</html>


ただの画像だけならURLのJAVAアプレットが使えると思います。

◎質問者からの返答

あらー。ありがとうございます!

ご丁寧にありがとうございます!

クリックは手が込んでるのですが、クリックするたびに一色ずつ塗られていく感じだと楽しいかと

思いまして。。

頂いたサンプルはビルダーに貼り付けるとエラーが出てしまいますのでただいま奮闘中です。

画像ファイルはどこの部分に入れるとよいのでしょうか。。素人ですいません。。


2 ● Mars
●100ポイント

http://mars.jpn.org/md_samples/q1115176044.html

#1です。

サンプルを(ちょっと改良して)アップしたのでソースのコピペはアップ先から行ってください。

(はてなの回答は記号類が全角化されるのでエラーになっていると思います。)


> クリックするたびに一色ずつ塗られていく感じ

これはできませんでした。


> 画像ファイルはどこの部分に入れるとよいのでしょうか

テーブルの中に画像を入れたいという意味であれば好きな場所に入れてみてください。

(二つのテーブルは同じように修正してください。完全に重ねているのでビルダーではうまく編集できないかも。)


#確か一つの質問に回答は2回までだったと思うので、さらにわからなければ他の方の回答を待ってください。

◎質問者からの返答

ひゃああ。すごいです!ありがとうございますーーーーー。普通なら高いお金はらってお教えいただくようなこと教えて頂きましてありがとうございます。質問はポイント送信にてさせていただければありがたいです。。お時間ありましたらまた

お答え頂ければと思います。すいません。

関連質問


●質問をもっと探す●



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