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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/05/04 12:07:24
  • 終了:--

回答(2件)

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202005/05/04 21:31:56

ポイント100pt

サンプルを書いて見ました。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アプレットが使えると思います。

id:abank

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

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

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

思いまして。。

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

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

2005/05/06 04:41:49
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202005/05/06 10:07:27

ポイント100pt

#1です。

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

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


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

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


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

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

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


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

id:abank

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

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

2005/05/06 14:50:02
  • id:Mars
    IE以外への対応について

    特殊効果の類は現状ではIEが独自に拡張したfilterしかありませんので、
    FlashやJAVAなどのPlug-inを要する必要があり、htmlで書かれたtableに効果を追加するのは無理があると思います。(JAVAについては詳しくないので出来ないと断言もできませんが)
  • id:abank
    Re:IE以外への対応について

    ご丁寧にありがとうございます。<(_ _)>
    ポイントは受けとってください。。
  • id:Mars
    Re(2):IE以外への対応について

    受け取りました。
    # いわしがよくわからなくて・・・ポイント送信でもして、連絡しないとここに投稿したことがわからないんじゃないかと思って。

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

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

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

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