† Dynamic HTML.

There are super essences for active home page.


Dynamic HTML を使えば、 Java や ActiveX などの難しいものを使わなくても、 にぎやかなホームページを簡単に作成することができます！
（ただし、ここで説明しているのは Internet Explorer 4.0 にのみ 対応しています。）

●Changing Color

このように見出しに表示している文字がだんだん変わっていきます。
見出しタグの id 属性を MainH1 にして、以下のスクリプトを 添えることで簡単に出来ます。（少し長いですが...）

<H3 id=MainH1>●<A name="color">Changing Color</A></H3>

<SCRIPT> //<!--- for Color Changing
var initialColor;
initialColor = 0;
initialR = 254;
initialG = 2;
initialB = 128;
rIncrement = -2;
gIncrement = 2;
bIncrement = -2;

function tick() {
   var hexR, hexG, hexB;

   hexR = intToHex(initialR);
//alert(hexR);
   hexG = intToHex(initialG);
//alert(hexG);
   hexB = intToHex(initialB);
//alert(hexB);

   initialR += rIncrement;
   initialG += gIncrement;
   initialB += bIncrement;

   if (initialR < 0) {
     initialR = 255;
     rIncrement *= -1;
   } else if (initialR > 255) {
     initialR = 0;
   }

   if (initialG < 0) {
     initialG = 255;
     gIncrement *= -1;
   } else if (initialG > 255) {
     initialG = 0;
   }

   if (initialB < 0) {
     initialB = 255;
     bIncrement *= -1;
   } else if (initialB > 255) {
     initialB = 0;
   }
    
   hexColor = "#"+hexR+hexG+hexB;
   MainH1.style.color = hexColor;
}

function intToHex(anInt) {
  var theString;
  var aDigit, aHexDigit;
  var i;

  theString = "";

  for (i = 1; i >= 0; i--) {
    p = power(16, i);
    aDigit = anInt / p;
    aDigit = round(aDigit);
    anInt = anInt - (aDigit * p);
    aHexDigit = digitToHex(aDigit);
    theString = theString + aHexDigit;
  }
  
  return theString;
}  

function power(aNumber, aBase) {

   var rval;

   if (aBase == 0)
     return 1;

   rval = aNumber;
   
   for (i=1;i<aBase;i++) {
      rval = rval * aNumber;
   }

   return rval;
}

function round(aNumber) {
  for (i = 16; i >= 0; i--) {
    if (aNumber >= i)
       return i;
   }
  return 0;
}

function digitToHex(aDigit) {
  if (aDigit < 10) 
     return aDigit;
  else if (aDigit == 10) 
     return "A";
  else if (aDigit == 11)
     return "B";
  else if (aDigit == 12)
     return "C";
  else if (aDigit == 13)
     return "D";
  else if (aDigit == 14) 
     return "E";
  else if (aDigit == 15)
     return "F";
  window.setTimeout("tick();", 100);
}
window.onload=tick;
//--->
</SCRIPT>

●Rollover Reverse

Profile Work Library

カーソルを上の文字に合わせると、反転表示になります。 Profile のように、リンクを含めることも出来ます。
まず、STYLE タグを HEAD タグと BODY タグの間に入れます。 
</HEAD>
<STYLE>
.Item {
   cursor: hand;
   font-family: verdana; 
   font-size: 20;
   font-style: normal;
 }
.Highlight {
   cursor: hand; 
   font-family: verdana;
   font-size: 20;
   font-style: italic;
   background-color: white;
   color: blue
 }
</STYLE>
<BODY>

次に、全体を DIV タグで囲み、反転する部分を SPAN タグで挟みます。
<DIV id=Rollover>
<A href="../index/index.htm"><SPAN class=Item>Profile</SPAN></A>
<SPAN class=Item>Work</SPAN>
<SPAN class=Item>Library</SPAN>
</DIV>
<P>

<SCRIPT> //<!--- for Roll on Reverse
function rollon() {
  if (window.event.srcElement.className == "Item") {
     window.event.srcElement.className = "Highlight";
  }
}

Rollover.onmouseover = rollon;

function rolloff() {
  if (window.event.srcElement.className == "Highlight") {
     window.event.srcElement.className = "Item";
  }
}

Rollover.onmouseout = rolloff;
//--->
</SCRIPT>

●Folder open

 Item 1
 Item 2

上のフォルダアイコンをクリックすると、フォルダを開くことが出来ます。 開いたフォルダをもう一度クリックすると閉じます。
全体を DIV タグ id=Outline で囲み、 隠れる部分を DIV タグ id=Out1 などで囲ます。 隠すかどうかを制御するアイコンは <IMG class=Outline id=Out1 ... で指定します。 &nbsp は改行や詰めたりしないスペースです。
<DIV id=Outline>
<FONT style="FONT-FAMILY: verdana; FONT-SIZE: 20px">
<IMG class=Outline id=Out1 src="folder.gif" style="CURSOR: hand">&nbsp;Item 1<BR>
  <DIV id=Out1d style="DISPLAY: none">
  &nbsp;&nbsp;<IMG class=Outline id=Out2 src="folder.gif" style="CURSOR: hand">&nbsp;Item 1.1<BR>
    <DIV id=Out2d style="DISPLAY: none">
    &nbsp;&nbsp;&nbsp;&nbsp;<IMG src="display.gif">&nbsp;Item 1.1.1<BR>
    &nbsp;&nbsp;&nbsp;&nbsp;<IMG src="display.gif">&nbsp;Iten 1.1.2<BR>
    </DIV>
  &nbsp;&nbsp;<IMG src="display.gif">&nbsp;Item 1.2<BR>
  </DIV>
<IMG src="display.gif">&nbsp;Item 2<BR></FONT>
</DIV>

<SCRIPT> //<!--- for Folder open
var img1, img2;
img1 = new Image();
img1.src = "folder.gif";
img2 = new Image();
img2.src = "ofolder.gif";

function doOutline() {
  var targetId, srcElement, targetElement;
  srcElement = window.event.srcElement;
  if (srcElement.className == "Outline") {
     targetId = srcElement.id + "d";
     targetElement = document.all(targetId);
     if (targetElement.style.display == "none") {
        targetElement.style.display = "";
        if (srcElement.tagName == "IMG") {
           srcElement.src = img2.src;
        }
     } else {
        targetElement.style.display = "none";
        if (srcElement.tagName == "IMG") {
            srcElement.src = img1.src;
        }
     }
  }
}

Outline.onclick = doOutline;
//--->
</SCRIPT>

●clock

 

時計です。 DIV タグの style 属性を変えることで、 フォントを指定することが出来ます。
<DIV id=Clock style="COLOR: #0000ff; FONT-FAMILY: Verdana; FONT-SIZE: 12px">&nbsp;</DIV>

<SCRIPT> //<!--- for Clock
function tick() {
  var hours, minutes, seconds, ap;
  var intHours, intMinutes, intSeconds;
  var today;

  today = new Date();

  intHours = today.getHours();
  intMinutes = today.getMinutes();
  intSeconds = today.getSeconds();

  if (intHours == 0) {
     hours = "12:";
     ap = "Midnight";
  } else if (intHours < 12) { 
     hours = intHours+":";
     ap = "A.M.";
  } else if (intHours == 12) {
     hours = "12:";
     ap = "Noon";
  } else {
     intHours = intHours - 12
     hours = intHours + ":";
     ap = "P.M.";
  }

  if (intMinutes < 10) {
     minutes = "0"+intMinutes+":";
  } else {
     minutes = intMinutes+":";
  }

  if (intSeconds < 10) {
     seconds = "0"+intSeconds+" ";
  } else {
     seconds = intSeconds+" ";
  } 

  timeString = ap+" "+hours+minutes+seconds;

  Clock.innerHTML = timeString;

  window.setTimeout("tick();", 100);
}

window.onload = tick;
//--->
</SCRIPT>

●Typing Replace

What you type in below will replace this HTML

テキストボックスに文字を入力してボタンを押すと、 上のテキストがその文字に変わります。
<DIV id=ReplaceMe style="FONT-FAMILY: verdana; FONT-SIZE: 20px">
What you type in below will replace this HTML</DIV>
<BR>
<INPUT id=T1 style="WIDTH: 400px">
<INPUT onclick="ReplaceMe.innerHTML = T1.value" type=button value="Click me to Change">

●Change Content

Now Changing!

上のように表示内容が変わっていきます。
DIV タグの id=Rep で表示部分を囲みます。 下の Rep_interval の値を変えることでスピードを調節できます。
<DIV id=Rep style="FONT-FAMILY: verdana; FONT-SIZE: 20px">
Now Changing!</DIV>
<P>

<SCRIPT> //<!--- for Folder open
var Rep_index = 0;
var Rep_time = 0;
var Rep_interval = 16;

function Rep_tick() {
  Rep_time ++;
  if ( Rep_time > Rep_interval ) {  Rep_time = 0;
    Rep_index ++;
    if ( Rep_index == 1 )
      Rep.innerHTML = "<IMG src=\"folder.gif\"> Image";
    else if ( Rep_index == 2 )
      Rep.innerHTML = "<B>Bold String</B>";
    else {
      Rep.innerHTML = "<I>Itaric String</I>";
      Rep_index = 0;
    }
  }
  window.setTimeout("Rep_tick();", 100);
}
window.onload=Rep_tick;
//--->
</SCRIPT>

●Duplicate Ticker

動いているものは、すべてタイマー・イベントからタイミングを 取っていますが、その入り口は１つしかありません。
そこで、次のようなスクリプトを用いて、それぞれの タイマー・イベントに対する処理を分配します。
<SCRIPT> //<!--- Duplicate Ticker
function tickAll() {
  tickA(); tickB(); Rep_tick();
  window.setTimeout("tickAll();", 100);
}
window.onload=tickAll;
//--->
</SCRIPT>

これまでに示したものの中の以下の部分がタイマー・イベントの入り口なので、 それぞれ削除する必要があります。
function tick()
{
  // ...
  window.setTimeout("Rep_tick();", 100);
}
window.onload=Rep_tick;

●Impression

Dynamic HTML って名前がいいですね。 単純だけど HTML が一段とスゴクなったような気がしますね。 まぁ、それは置いといて...
Dynamic HTML は、プログラムのソース・コードに相当する 部分が HTML 自身に書かれているので、アプレットや ActiveX とちがって、コンパイラを通す必要がありません。 手軽にプログラミングして、すぐに結果が見られるというわけです。 メモ帳だけでも出来ますが、規模が大きくなるとちょっとつらく なります。エラーが出るとその行番号を知らせてくれるのですが、 メモ帳は行番号を表示してくれませんね （行番号表示とキーボード・マクロができれば他のエディタは 要らないと思っている）。
Netscape も Dynamic HTML があるそうですが、IE と互換性が 無いんですね。新しい技術だから仕方ないけど、統一してもら いたいです。ブラウザ競争は IE に少し分がありそうになって きたので、ここは Microsoft にがんばってもらって Netscape に合わせる余裕でも見せてもらいたいものです。
なお、これらの情報は、Microsoft ホームページの Dynamic Content ページによるものです。 このページは IE4.0 のサブ・ページですが、 二番目のトピック（一番目は概要）というあたり 力が入ってるんじゃないでしょうか。

ところで、僕のホームページでは、 Dynamic HTML を使ってませんね。 近いうちにやろうと思います。

（追加 Apr.1.1998）
ようやく Dynamic HTML をホームページに使いました。 といっても、ほとんど Java Script と CSS(Cascading Style Sheet) です。
これで僕のホームページは、バグだらけの IE4 しか受け付けなくなるわけで複雑な心境です。 右下の時計も調子悪いようで、 clock1.filters.revealTrans オブジェクトの apply(), play() メソッドでたまにエラーが出ます。 おそらく、アニメーションの処理が遅れて 二重に開始されたときにエラーが出るみたいですけど、 誰か治し方を知りませんか？

return to Top Page