WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:スタイルシートをランダムに表示する。

0:[投稿] chirumiru [MAIL] [URL] [2004/01/12 15:34 ][環境:IE6、Win98 UNIX]

こん○○わ。>ALL様。
chirumiruです。

JavaScriptを使って、
スタイルシートの文字をランダムな位置に、
表示し。

一定回数を過ぎると、
定められた位置に表示する、
スクリプトを書いています。

==================================================
<link rel="stylesheet" href="content2.css" type="text/css">
/* content2.cssの内容 */ 
    .con_style1 {
        color:"#00ff00";
        text-align:"center";
        vertical-align:"bottom";
        background-color:"#ff8c00";
        font-size:"20pt";
        font-family:"DFPOP体";
        border-style:"inset";
        border-width:"5px";
        width:"40px";
        height:"40px";
        padding:"2px";
        position:"absolute";
    }

    .con_style2 {
        color:"rgb(0%, 80%, 0%)";
        text-align:"center";
        vertical-align:"bottom";
        background-color:"rgb(0%, 80%, 0%)";
        font-size:"20pt";
        font-family:"DFPOP体";
        border-style:"outset";
        border-width:"5px";
        width:"40px";
        height:"40px";
        padding-top:"1px";
        position:"absolute";
    }

<script type="text/javascript">
    function Get_top()  { while (this.top<465 || this.top>545) { this.top=Math.random()*1000; } }
    function Get_left() { while (this.left<205 || this.left>570) { this.left=Math.random()*1000; } }
    function Set_position(top, left) {
        this.top=top; this.left=left;
        this.get_top=Get_top;
        this.get_left=Get_left;
    }
    Set_position.prototype.type1=function() { document.write('<span class=con_style2 style=top:'+this.top+'px\;left:'+this.left'+px\;>'); }
    Set_position.prototype.type2=function() { document.write('<span class=con_style1 style=top:'+this.top+'px\;left:'+this.left'+px\;>'); }

    for (num=0; 0<13; num++) { var SS[num]=new Set_position(); }

    date=new Date(); var y_pos=0, flag=0, i=0;
    function init_() {
        cookie=document.cookie;
        if (cookie.indexOf("TRUE")<0) {
            scrollBy(0, 5);
            y_pos+=5;
            if (y_pos<350) { scrid=setTimeout("init_()", 225); }
            else           {
                 date.setTime(date.getTime()+(10*1000*60*60*24));
                 expday=date.toGMTString();
                 tmp="FLAG"+"="+escape("TRUE")+";";
                 tmp+="expires="+expday;
                 document.cookie=tmp;
                 clearTimeout(scrid);
            }
        }
        else { scrollTo(0, 350); }
        position_();
/* いまは<body>タグ内に書いています */
        document.write("<span class=con_style2 style=top:465px\;left:215px\;><a href=./ayumi_frame.html                               target=view   onMouseover=guide_(true,  0) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:505px\;left:205px\;><a href=http://hpcgi2.nifty.com/penelotty/chirumiruDIARY.cgi target=_blank onMouseover=guide_(true,  1) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></span>");
        document.write("<span class=con_style2 style=top:545px\;left:205px\;><a href=./anq.html                                           target=_blank onMouseover=guide_(true,  2) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:425px\;left:245px\;><a href=./shigoto_frame.html                                 target=view   onMouseover=guide_(true,  3) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style1 style=top:505px\;left:245px\;><font style=color:#ff8c00\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:465px\;left:275px\;><font style=color:rgb(0%, 80%, 0%)\;>●</font></span>");
        document.write("<span class=con_style2 style=top:505px\;left:285px\;><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:545px\;left:285px\;><a href=./link.html                                          target=view   onMouseover=guide_(true,  6) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:545px\;left:380px\;><a href=http://hpcgi2.nifty.com/penelotty/tsudoi.cgi         target=_blank onMouseover=guide_(true,  7) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style1 style=top:425px\;left:475px\;><font style=color:#ff8c00\;>●</font></span>");
        document.write("<span class=con_style2 style=top:505px\;left:475px\;><a href=http://hpcgi2.nifty.com/penelotty/chirumiruBBS.cgi   target=_blank onMouseover=guide_(true,  8) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:545px\;left:475px\;><a href=http://hpchat2.nifty.com/cgi-bin/chatentry.cgi?room=ZUL11533       onMouseover=guide_(true,  9) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
        document.write("<span class=con_style2 style=top:545px\;left:570px\;><a href=./k_top.html                                       target=_top   onMouseover=guide_(true, 10) onMouseOut=guide_(false, 0)><font style=color:rgb(0%, 80%, 0%)\;>●</font></a></span>");
    }

    function position_() {
        if (flag>35) { clearInterval(ID0); return; }
        flag++;
        ID0=setInterval("position_()", 500);
        SS[0].Set_position(0, 0); SS[0].get_top(); SS[0].get_left(); SS[0].type1();
        SS[1].Set_position(0, 0); SS[1].get_top(); SS[1].get_left(); SS[1].type1();
        SS[2].Set_position(0, 0); SS[2].get_top(); SS[2].get_left(); SS[2].type1();
        SS[3].Set_position(0, 0); SS[3].get_top(); SS[3].get_left(); SS[3].type1();
        SS[4].Set_position(0, 0); SS[4].get_top(); SS[4].get_left(); SS[4].type1();
        SS[5].Set_position(0, 0); SS[5].get_top(); SS[5].get_left(); SS[5].type1();
        SS[6].Set_position(0, 0); SS[6].get_top(); SS[6].get_left(); SS[6].type1();
        SS[7].Set_position(0, 0); SS[7].get_top(); SS[7].get_left(); SS[7].type1();
        SS[8].Set_position(0, 0); SS[8].get_top(); SS[8].get_left(); SS[8].type1();
        SS[9].Set_position(0, 0); SS[9].get_top(); SS[9].get_left(); SS[9].type1();
        SS[10].Set_position(0, 0); SS[10].get_top(); SS[10].get_left(); SS[10].type1();
        SS[11].Set_position(0, 0); SS[11].get_top(); SS[11].get_left(); SS[11].type2();
        SS[12].Set_position(0, 0); SS[12].get_top(); SS[12].get_left(); SS[12].type2();
    }

</script>

<body bgcolor="#ffa500" text="#ffffff" onLoad="init_()">

==================================================

init_()関数ですが、現在のページでは、position_()関数をいれてなくて、
その場合には正常に表示されています。

よろしければ、
上記URLを参照してください。

どこがどのようにおかしいと特定できずに、
動かないから質問、
という、
とても無責任にも思いますが、

どうか、
ご教示を願います。


1:[回答] 平野 敬 [MAIL] [URL] [2004/01/12 15:55 ]

まず,何を教示してほしいのかを明確に示してはいかがですか。


2:[質問] chirumiru [MAIL] [URL] [2004/01/12 16:27 ]

平野 敬さん、
こんにちわ、(はじめまして)

そしてありがとうございます。

簡潔にいいますと、(はじめからそうすればいいんですが、(^-^;;;)、
position_()関数が作動せず、
ランダムな位置に表示されません。

その直前にalert()をおいてみたんですが、
どうも、
そこまで達している様子も、
ありません。

Set_position()コンストラクタの定義が間違っているのでしょうか?

サーバにはまだランダム表示せずに、
はじめから位置指定をしているソースをおいていますので、
あくまでローカルな環境でのテストですが。

みなさん、
これで十分でしょうか?

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World