フローティング広告の作り方で困っています。


やりたいことは。。

1)トップページにアクセスすると、大き目の画像Aが表示される
2)数秒してAが閉じると、通常のHPのトップページ
3)Aには閉じるボタンをつけたい。アニメーションは無し(閉じるボタンはなくてもよい)

ただそれだけなのですが、
いろいろ資料を読むとかなりむずかしそうで。。

FlashもJavaScriptも初心者なので困っています。
CSSのみで作ることはできないでしょうか。
できそうな気もするのですが。。

もちろん簡単な操作でしたらFlashも使用可能です。
CSSやJavaScriptの基本も知っています。
よい方法がありましたら教えてください。
よろしくお願いたします。

回答の条件
  • URL必須
  • 1人10回まで
  • 登録:2009/12/28 22:57:00
  • 終了:2010/01/04 23:00:03

ベストアンサー

id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/29 00:00:20

ポイント35pt

個人的には、ウザイと思う仕様なので、あまり勧めたくないけど、

一例としてサンプルを作ってみた。

極力、必要最小限に絞ったつもりだが、理解してもらえるだろうか? 

ちなみに表示時間は5秒に設定。閉じるボタンはAタグ使用。

<html>
<head>
    <style type="text/css">
    <!--
        body { background-color:pink; }
        h1 { font-size:50px; }
        p { font-size:30px; }
        a { font-size:30px; }
        div#f { background-color:white; position:absolute; top:30px; left:30px; }
    //-->
    </style>
    <script type="text/javascript">
    <!--
        function fc() {
            document.getElementById('f').style.display = 'none';
        }
    //-->
    </script>"
</head>
<body onload="javascript:setTimeout(fc, 5 * 1000);">
    <h1>フローティング広告</h1>
    <p>ここには</p>
    <p>コンテンツがいろいろあるはず</p>
    <div id="f">
        <a href="javascript:void(0)" onclick="javascript:fc(); return false;">閉じる</a><br />
        <img src="a.bmp" />
    </div>
</body>
</html>

http://q.hatena.ne.jp/ダミー です。

id:warumaki

ありがとうございます!!!

早速トライしてみました。

これでやりたいことが実現できそうです。

本当にありがとうございます!!!

2009/12/29 10:22:56

その他の回答(1件)

id:horosco75 No.1

horosco75回答回数47ベストアンサー獲得回数52009/12/28 23:36:45

ポイント35pt

CSSだけでは無理。

jQueryを使えば、比較的簡単にできる。

http://ascii.jp/elem/000/000/478/478300/

id:warumaki

jQueryについては初めて知りました。

早速勉強してみます!

ありがとうございます!

いろいろなことが簡単にできそうですね。

2009/12/29 10:23:51
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012009/12/29 00:00:20ここでベストアンサー

ポイント35pt

個人的には、ウザイと思う仕様なので、あまり勧めたくないけど、

一例としてサンプルを作ってみた。

極力、必要最小限に絞ったつもりだが、理解してもらえるだろうか? 

ちなみに表示時間は5秒に設定。閉じるボタンはAタグ使用。

<html>
<head>
    <style type="text/css">
    <!--
        body { background-color:pink; }
        h1 { font-size:50px; }
        p { font-size:30px; }
        a { font-size:30px; }
        div#f { background-color:white; position:absolute; top:30px; left:30px; }
    //-->
    </style>
    <script type="text/javascript">
    <!--
        function fc() {
            document.getElementById('f').style.display = 'none';
        }
    //-->
    </script>"
</head>
<body onload="javascript:setTimeout(fc, 5 * 1000);">
    <h1>フローティング広告</h1>
    <p>ここには</p>
    <p>コンテンツがいろいろあるはず</p>
    <div id="f">
        <a href="javascript:void(0)" onclick="javascript:fc(); return false;">閉じる</a><br />
        <img src="a.bmp" />
    </div>
</body>
</html>

http://q.hatena.ne.jp/ダミー です。

id:warumaki

ありがとうございます!!!

早速トライしてみました。

これでやりたいことが実現できそうです。

本当にありがとうございます!!!

2009/12/29 10:22:56

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

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

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

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

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