아이디어는 아주 간단하다. [00] 부터 [11] 까지 차례로 읽은 사람이라면 이건 아주 식은죽 먹기이다.

우선 그림을 나타내는 레이어와 글자를 나타내는 레이어를 생성한다. 각자 생성하고자하는 레이어의 위치와 넓이,높이는 알아서 적당하게 지정해야한다.

그리고 먼저 그림위에 글자를 놓는것이므로 그림레이어를 먼저 생성하고 그 뒤에 글자 레이어를 생성하면 된다.

그림의 위치를 지정하였으므로 글자의 위치는 그림위에 존재하도록 적당한 좌표를 지정하면 된다. 소스를 보고 각각의 레이어의 좌표를 확인하면 설명이 필요없을 것이다.

이때 주의 할 점은 생성하는 레이어 순으로 보여지므로 글자 레이어 먼저 만들면 그림밑에 글자가 위치해 글자가 보이지 않게된다. 주의해야 한다.

HTML Example
<html>
<head>
<title>Hellow Homepage - DHTML</title>
<script language="JavaScript1.2" src="cbdhtml.js">
</script>
</head>

<body bgcolor=white>

<script language="JavaScript1.2">

var img="img";
content='<img src=../img/title_dhtml.gif border=0>';
createLayer(img,5,5,468,60,1,content);

var text="text";
content='<font size=2>그림위에 글자 놓기</font>';
createLayer(text,7,7,300,20,1,content);

var text2="text2";
content='<font size=2 color=green>마음먹은 곳에 놓을 수도 있다.</font>';
createLayer(text2,30,30,300,20,1,content);

</script>

</body>
</html>