M10 クリスマスツリー/イブの夜に逢えないふたりへ…(^^)
ページに入るとすぐに名前を聞いてきます。名前が違えばよそのページへ飛ばします(^^;;。彼女(彼氏)にアドレスを教えておいてアクセスしてもらいましょう(^0^)/。サンプルでは「test」と入力するようになってますのでこれを相手の名前に書き換えておいてください。click me!を押すと自動アニメーション後、メッセージが表示されますので、ここで愛の告白(^^)をするのもよいかも。じゃ、がんばってください(^^)/~。

応用:SIMPLM10のホルダーごとコピーして使ってください。

Sample

Source

ソース
(コピーしてお使いください)

<html>
<head>
<title></title>

<script language="JavaScript1.1">
<!--

//名前の確認処理ここから-------------------------

//相手の名前(パスワード)をセットしておきます
//でも、ここに書いちゃうのでセキュリティは最低ランクです(笑)
var v2="test"

//promptダイアログ用メッセージ
var msgp="#とりあえず「test」と入力してください(^^)"

//alertダイアログ用メッセージ文をここで設定します
var msg1="                   (^^)/"      ;//メッセージ1行目
var msg2="Merry Christmas &I Love You !" ;//メッセージ2行目
var msg3="                   (^^)/~"     ;//メッセージ3行目

//名前が違った時のページアクセス拒否ってほどのバリアではないですが....
//(一瞬みえますけど(^^;;よそのページへ飛ばします)
function backURL(){ location.href='MSG.HTM' }

//名前の入力確認
function nameNyu()
{
  v1 = prompt(msgp,"")

  //--IE4,5のバグ回避
  if(document.all)v1=unescape(escape(v1).split('%00')[0])

  if ( v1 == v2 ){
  }else{
    backURL() ;//入力名がv2と違えばアクセス拒否
  }
  nameDayon=v1
}
nameNyu();//名前の入力確認functionを実行

//名前の確認処理ここまで-------------------------

Thref0  = '' ;//画像を置いておくディレクトリ。カレントなら''
cow     = 0  ;//ツリーの幅デフォルト
co      = 0  ;//ツリーの段数デフォルト
imgNo   = 4  ;//ツリークリック時のイメージNoデフォルト
clno    = 3  ;//ツリーをなぞったときに書き換えるイメージNoデフォルト

//ペイントパターン
sample7 = "001012012301234012345012345601234566012345666";
sample8 = "155555555355533555333555333355533333555333333";
sample9 = "235556605215533551365556441565140555323433564";
dI      = "155555555355533551133555133355511333555333333";
ds      = "155555555355533555333555333355533333555333333";
dL      = "155555555355533551133555133355511133555333333";
dO      = "155555555351113515313551313355511333555333333";
dV      = "155555555355533551313555113355531333555333333";
dE      = "155555555311133515333511333355133333551113333";
dY      = "155555555351513551133555133355513333555333333";
dO      = "155555555351113515313551313355511333555333333";
dU      = "155555555355533555131555133155531313555331133";

//イメージの事前読み込み
if(document.images)
{
  //まずonボタンイメージを10枚
  NOonimg = new Array();
  for(si=0;si<10;si++)
  {
    NOonimg[si] = new Image();
    NOonimg[si].src = Thref0+"NO"+si+"ON.JPG";
  }
  //次にoffボタンイメージを10枚
  NOoffimg = new Array();
  for(sj=0;sj<10;sj++)
  {
    NOoffimg[sj] = new Image();
    NOoffimg[sj].src = Thref0+"NO"+sj+"OF.JPG";
  }
  //ボールイメージを8枚
  BALLtreeonimg = new Array();
  for(i=0;i<8;i++)
  {
    BALLtreeonimg[i] = new Image();
    BALLtreeonimg[i].src = Thref0+"BALL"+i+".JPG";
  }
}

function TreeWrite(){

  //タイトル画面構築
  document.write('<body bgcolor="#ffffff" text="#000000" link="RED"')
  document.write('     alink="#ffffff"  vlink="GREEN">')
  document.write('<center>')
  document.write('<font size=6 >'+nameDayon+'に贈る...</font><br>')
  document.write('<font size=7 color="red">M</font>')
  document.write('<font size=7 color=#777777>erry </font>')
  document.write('<font size=7 color="green">C</font>')
  document.write('<font size=7 color=#777777>hristmas</font><br>')
  document.write('<font size=1>読込完了までclickはちょっとまってね(^^)/.......</font><p>')
  document.write('<br><br>')

  //クリスマスツリー画像の構築

  for(k=0;k<10;k++)
  {
    document.write('<nobr>')
    for(q=0;q<cow;q++)
    {
      document.write('<a href="javascript:meirei('+co+')"')
      document.write('   onMouseOver="BALLtreeon('+co+')">')
      document.write('<img border=0 name="BALLtree'+co+'"')
      document.write('     src="'+Thref0+'BALL0.JPG" width="24" ')
      document.write('     height="24"></a>')
      co++
    }
    document.write('</nobr><br>')
    cow++;
    if(cow>=10){ break }
  }
  document.write('<p><a href="javascript:auto(1)">')
  document.write('<img  border=0 name="wd"')
  document.write('      SRC="'+Thref0+'BALL6.JPG" ')
  document.write('      width="24" height="24">')
  document.write('<br>click me !</a><p><hr width=20%>')

  //Toolsの書きだし
  document.write('<nobr><font COLOR="red">T</font>ools'.sup());
  for(s=0;s<7;s++)
  {
    document.write('<a href="javascript:clset('+s+')">')
    document.write('<img  border=0 name="bl'+s+'"')
    document.write('      src="'+Thref0+'BALL'+s+'.JPG" ')
    document.write('      width="24" height="24"></a>')
  }
  document.write(' / '.sup());

  //Samplesの書きだし
  document.write('<font COLOR="red">S</font>amples '.sup());
  for(k=0;k<10;k++)
  {
    document.write('<a href="javascript:if('+k+'<7){setup('+k+')}')
    document.write('else{sample=sample'+k+';sampleDayon();}"')
    document.write(' onMouseOver="NOon('+k+')"')
    document.write(' onMouseOut="NOoff('+k+')">')
    document.write('<img  border=0 name="NO'+k+'"')
    document.write('      SRC="'+Thref0+'NO'+k+'ON.JPG" ')
    document.write('      WIDTH="12" HEIGHT="24"></a>')
  }
  document.write('</nobr>')

  //説明文の書きだし
  document.write('<p><font size=1>左の好きなToolをclickしてから')
  document.write('<br>ツリーをなぞるとお絵描きできます(^^)/')
  document.write('<br>SamplesとClick me ! は自動描画です')
  document.write('<br></font>')
  document.write('<form>')
  document.write(' <input type="button" value=" clear " ')
  document.write('        onClick="setup(7)">')
  document.write('</form><hr width=20%>')
  document.write('<br>')
  document.close()

}

//ボタン画像のon/offとサンプルの書き換え処理
function NOon(NOno)
{
  if(document.images)
  {
    document.images['NO'+NOno].src=NOoffimg[NOno].src;
    if(NOno<7){setup(NOno)};
    if(NOno==7){sample=sample7;sampleDayon()};
    if(NOno==8){sample=sample8;sampleDayon()};
    if(NOno==9){sample=sample9;sampleDayon()};
  }
}
function NOoff(NOno)
{
  if(document.images)
  {
    document.images['NO'+NOno].src=NOonimg[NOno].src;
  }
}

//ツリーをなぞった時(onMouseOver)の処理
function BALLtreeon(BALLtreeno)
{
  if(document.images)
  {
    document.images['BALLtree'+BALLtreeno].src= Thref0+"BALL"+clno+".JPG";
  }
}

//ツリーをクリックした時(HREF="javascript:)の処理
function meirei(BALLtreeno)
{
  if(document.images)
  {
    document.images['BALLtree'+BALLtreeno].src=Thref0+"BALL1.JPG";
  }
}

//imgNoで指定したイメージでの塗りつぶし
function setup(imgNo)
{
  if(document.images)
  {
    for(cl=0;45>cl;cl++){
      document.images['BALLtree'+cl].src=BALLtreeonimg[imgNo].src};
  }
}

//ペイントパターンをセットした画像の書きだし
function sampleDayon()
{
  for (p=0;p<45; p++)
  {
    document.images['BALLtree'+p].src =BALLtreeonimg[sample.charAt(p)].src
  }
}

//Toolsボタンクリック時に何番目をクリックしたかをclnoにセットする
function clset(climgno){ clno=climgno;return }

//click me!を押したときの自動アニメーション
function auto(loop)
{
  for(lo=0;loop>lo;lo++){
    setup(0);setup(3);setup(1);setup(5);
    sample=sample9;sampleDayon();
    setup(2);setup(3);setup(1);
    sample=sample8;sampleDayon();
    sample=dI;sampleDayon();
    sample=ds;sampleDayon();
    sample=ds;sampleDayon();
    sample=dL;sampleDayon();
    sample=dO;sampleDayon();
    sample=dV;sampleDayon();
    sample=dE;sampleDayon();
    sample=ds;sampleDayon();
    sample=ds;sampleDayon();
    sample=dY;sampleDayon();
    sample=dO;sampleDayon();
    sample=dU;sampleDayon();
    sample=ds;sampleDayon();
    alert('\n'+msg1+'\n'+msg2+'\n'+msg3);//メッセージ表示
  }
}

document.write('</center>')
document.close()

//-->
</script>

</head>

</body>

<script language="JavaScript1.1">
<!--
TreeWrite()
<!---->
</script>

</body>
</html>

使用している画像:
NO0ON.JPG NO1ON.JPG NO2ON.JPG NO3ON.JPG NO4ON.JPG
NO5ON.JPG NO6ON.JPG NO7ON.JPG NO8ON.JPG NO9ON.JPG
NO0OF.JPG NO1OF.JPG NO2OF.JPG NO3OF.JPG NO4OF.JPG
NO5OF.JPG NO6OF.JPG NO7OF.JPG NO8OF.JPG NO9OF.JPG
BALL0.JPG BALL1.JPG BALL2.JPG BALL3.JPG
BALL4.JPG BALL5.JPG BALL6.JPG BALL7.JPG