Updated on Wednesday, January 14, 2004

Net Art

Table of Contents

Pages in English are encoded by iso-8859-1.

Those in Japanese are encoded in UTF-8.

file name
Title & Brief Description
A new window will open up when you click each link.

Presentation of Butts

Presentation of Butts with MAP and AREA tags and USEMAP attribute



一つの写真や絵を MAP と AREA タグを使って幾つかに分けて、それぞれの部分がクリックした場合に違った反応を示すようにします。     こうすることで、一つの写真に写っている4つのお尻のどれか一つをクリックすると、その女性の全身写真が表示されます。


Ditzy Blonde (transparent Gif animation)

How to create a transparent GIF animation by JASC Paint Shop Pro 8.0 with a simple example (picture of June in bikini like Jayne Mansfield)
Called from Ditzy Blonde of the Beaverland Unlisted Slang site

index.html 絵入りメニュー (Part 1)—ビーバーランド ネットアート
index2.html 絵入りメニュー (Part 2)—ビーバーランド ネットアート
index_en.html Pictorial Menu Page (Part 1)—Beaverland Net Art
Site for Net Artists
index2_en.html Pictorial Menu Page (Part 2)—Beaverland Net Art
Site for Net Artists
list_en.html This listing
notyet_en.html message page—Not Yet Ready
Visitors can find various links.
notyet_jp.html メッセージ・ページ 『まだページが出来ていません。』

Blonde Pinup: Transparent GIF Animation Quality

Featuring a fascinating blond pinup
How to reduce the file size with regard to animation quality
A large file size slows down the download of its page.

the number of electrical symbols per second that a modem sends down a phone line. Although incorrect, it is often used as a synonym for bps (bits per second). This is named after J.M.E. Baudot—inventor of the teletype.
It stands for Integrated Services Digital Network—a faster, digital phone service that operates at speeds as high as 128 kilo bits per second.
ADSL: (Asymmetric Digital Subscriber Line)
A technology that lets you transmit data over phone lines much faster than regular dialup or ISDN, as much as 7 million (7,000 kilo) bps. It is asymmetric because it allows faster download speeds than upload. In other words, receiving email is faster than sending it. This service is always on, so there is no wait to connect. Because your phone service is unaffected, you can make and receive calls while you access the Internet.

How to reduce an animation-file size

Part 2 of the previous page


How to reduce an animation-file size Even More

Part 3 of the previous page


Animation Presentation with a FORM tag

How to present an animation with a FORM tag
related to the previous three pages


Animation Presentation with CSS

Why with CSS?
In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist.


How to reduce an animation-file size with Javascript

Comparison Chart
  GIF animation
with 2 full-size pics
GIF animation
with 1 full-size
& 1 part
GIF animation
with 1 full-size
& 1 part
with 1 full-size
& 1 part
No. of Colors 127 127 63 16 millions
File size 138 K bytes 76 K 51 K 35 K
Download time
at 14.4K baud
1 min 42 sec 56 38 20
Download time
at 28.8K baud
52 seconds 28 19 10
Download time
at 56K baud
27 seconds 15 10 6
Download time
over ISDN
12 seconds 7 5 3
page described Blonde Pinup:
transparent Gif
animation quality
How to reduce
an animation-
file size
How to reduce
an animation-
file size
even more
this page

present0.html Sample of “How to Present a GIF Animation”
called from How to Speed Up a Presentation

How to Speed Up a Presentation

This page is a sequel of How to Present a GIF Animation (present_en.html).
If you have a fast broadband link, you might not notice this difference. But if you are on a modem connection, you can clearly see the improved presentation, in which you don’t see an unsightly blank gap between pictures displayed on the screen.


How to Speed Up a Presentation Even More

Part 3 of the GIF animation presentation series

present9.html Sample of a slightly improved version
Called from How to Speed Up a Presentation Even More (present3_en.html).

How to Present a GIF Animation

The href attribute of the anchor tag will instruct your browser to execute javascript void() method, which will evaluate its parameter or invoke the statement if it is an instruction.

In this case, your browser will simply replace the current picture with the GIF animation (juneache.gif).

For more information on the void() method, please visit this page: I am a chimp in love with you, but have a problem to fix with void(0).

If you want to know more about event handlers, please visit this page: How To Use an Event Handler

If you wonder what those double dots are, please visit this page: What the heck is this double-dot?



配列変数 (array variable) を使った8フレームの簡単なジャバスクリプト・アニメーション






<DIV> タグはとても便利なタグで、これを使うことによって、このページの一部を指定して、上のように写真を表示したり、 また、いろいろなトリックを使って面白く表示することが出来ます。

スタイル・シートの使い方を知っていると、<DIV> タグと一緒に使うことにより、いろいろなことが出来ます。 すぐ上のタイトルなども、スタイルシートを使ってバックグランドを指定し、その上に文字を表示しています。

このページの例では、テーブルの位置を<DIV> タグを使って指定しています。この場合のテーブルは、カップルの写真とちょうど同じ大きさに設定されています。

<div style="height:600px; padding-top:355px;

<table . . . .>



何も指定しないと、カップルの写真は、夕暮れの写真の左上の角に重なるように表示されます。 それで、上のように、次のコードが書き加えられています。


こうすることによって、カップルの写真が、夕暮れの写真のトップから355ピクセル下がったところに表示されます。 このカップルの写真の大きさは、縦が245ピクセルで、横が404ピクセルです。 従って、355に245を足すと、600ピクセルになるわけで、この数字は、次のコードの数字と同じになります。


つまり、上の “height” というのは、この場合、夕暮れの写真の縦の長さになります。この長さが、<DIV> タグで指定したディビジョン、 つまり、このページの夕暮れの写真が乗っている部分の縦の長さということになります。

trans_en.html How to Create a Transparent GIF Image
This page tells you how to create a transparent GIF picture, using JASC Paint Shop Pro 8.0.
wink.html JavaScriptでウィンクを!



<script language="javascript">
<!---- to hide

function goWink() {

function restore() {


上の goWink() というファンクションを、このページの body タグの中に次のように書き込んであります。

<body onLoad="goWink()" bgcolor="blue" link="blue" vlink="navy" alink="red">

onLoad というのは ジャバスクリプトでは「イベント・ハンドラー」と呼ばれているものの一つです。 「イベント・ハンドラー」はたくさんあります。onClick というのも、そのうちの一つですが、これについては、後ほど説明します。

この場合、何をするかというと、 ウェブ・ページがあなたのブラウザーにロードされたら【読み込まれたら】、すぐにgoWink()という、上のコードで書かれたファンクションを実行します。


wink2.html スタート・ストップ メカニズム


前のページのコードと違うところは、このページでは myTimerID という変数を導入してタイマー・メカニズムをコントロールしていることです。 つまり、ウィンクを止める時には、 ボタンをクリックしてタイマーを止めます。 このタイマーを止めるのに、ジャバスクリプトにすでに付いているファンクションを使います。これが、clearTimeout() というファンクションです (メソッドとも呼ばれます)。  

setTimeout() は clearTimeout() と同じようにジャバスクリプトに前もって組み込まれているメソッドです。

clearTimeout()を使うときには、必ず忘れずに setTimeout() の前に、 タイマー変数を次のように付け加えてください。

validName=setTimeout("someFunction()",any number)



clearTimeout()を実行することによって、繰り返されているアクションを止めることが出来ます。 再起動させる時には、setTimeout()を実行します。 もちろん、上に示したようにタイマー変数を忘れずに付けてください。

validName はどんな名前でも結構です。タイマー変数だからといって特別な名前をつける必要はありません。 ただし、ユニークな名前でなければなりません。つまり、このページの他で使っている変数は使えません。

従って、validName, validname, VALIDNAME は全く違った変数として扱われます。

wink3.html どのようにしたら、ウェブページ閲覧者がスピードを設定できるか?

最初の INPUT タグ

<input type="text" size="5"
        name="delayNumber" value="3000">

これはスピード・メーターの部分です。つまり、ウィンクとウィンクの間隔が、ミリセカンドで表示されます。 この表示だけに使われる“窓”にdelayNumberという名前を与えています。

delayTimeは、間隔を表す変数です。この2つは非常に良く似ていますが、全く性質の異なるものですので、 混同しないように注意してください。

初期値を表示するために、valueアトリビュートを使って 3000 をその初期値として与えています。



2番目の INPUT タグ

<input type=button value="Faster "
  onClick="if (delayTime > 10) {delayTime -= 10;
    document.thisForm.delayNumber.value = delayTime}"
  onDblClick="if (delayTime > 100) {delayTime -= 100;
    document.thisForm.delayNumber.value = delayTime}">

この INPUT タグで上のボタンの機能を設定しています。 onClick はイベント・ハンドラーと呼ばれるものです。


この場合、クリックすると次の IF ステートメントを実行します。

if (delayTime > 10) {delayTime -= 10;
    document.thisForm.delayNumber.value = delayTime}


delayTime -= 10


delayTime = delayTime - 10

つまり、delayTime から10を引いた数値を delayTime に保存し直します。

delayTime は上のコーディング・シートの中で、次に示すようなやり方で、3000という初期値が与えられています。

var delayTime=3000

var はvariable の略で、「変数」という意味です。

document.thisForm.delayNumber.value = delayTime

上の 複合IFステートメントの2番目のステートメントは、簡単に言えば、delayTimeで表される数値をテキストに変換して、 最初の INPUT タグで設定された“窓”に表示しなさいという命令です。

ジャバスクリプトでは、“窓”に表示されるストリング・バリュー(value)を、このように厳密に指定しているわけです。 左側の4つの単語は、専門用語では、「オブジェクト」と呼ばれるものです。オブジェクト・プログラミングというような時に使われるオブジェクトが、この「オブジェクト」のことです。 つまり、documentというのは、ドキュメント・オブジェクトで、この場合には、このページを意味しています。

thisFormと言うのはフォーム・オブジェクトのことです。つまり、FORMタグで設定した、上のコーディング・シートで言うと、 薄い緑色で囲まれた部分です。この部分(オブジェクト)を次のように nameアトリビュートを使って thisForm と名づけています。

<form name="thisForm">



ドットは所有関係、もしくは所属関係を表しています。ドットの左側が所有しているもの、 右側が所有されるもの、あるいは左側のオブジェクトに所属しているものと言う意味です。

「テキスト窓」オブジェクトを使う場合、注意しなければならいのは、フォーム・オブジェクトと一緒に使わなければなりません。 そうでないとエラーになって、全く動きません。つまり、次のような使い方は出来ません。

document.delayNumber.value = delayTime


onDblClick イベント・ハンドラー



3番目の INPUT タグ

<input type=button value="Slower "
  onClick="delayTime += 10;
    document.thisForm.delayNumber.value = delayTime"
  onDblClick="delayTime += 100;
    document.thisForm.delayNumber.value = delayTime">

2番目の INPUT タグとほぼ同様です。この場合には、引き算でなく足し算になっているのが違っているだけです。 引き算の場合と違って、マイナスになることがないので IFステートメントは使われていません。従って、上限を設けていません。 上限を設ける場合にはIFステートメントを付け足す必要があります。

Web Ring
Beaverland eTopia Web Ring
Ring Owner: Akira Kato Site: Beaverland Home
Please click one of the five choices above!

List of \MyWebs\FreeCity\artist\
As of 10:58 a.m.,
Tuesday, August 26, 2003

 Volume in drive C has no label.
 Volume Serial Number is 00A4-A72B

 Directory of C:\MyWebs\FreeCity\artist

26/08/2003  10:58 AM    <DIR>          .
26/08/2003  10:58 AM    <DIR>          ..
25/08/2003  10:10 AM            21,298 ditzy_en.html
25/08/2003  04:22 PM    <DIR>          images
25/08/2003  10:55 AM    <DIR>          ImgInWork
26/08/2003  12:12 AM            13,994 index2_en.html
25/08/2003  11:01 PM            13,567 index_en.html
26/08/2003  10:58 AM                 0 list0.txt
25/08/2003  11:51 PM            22,727 pinup1_en.html
25/08/2003  11:52 PM            19,558 pinup2_en.html
25/08/2003  11:56 PM            19,770 pinup3_en.html
25/08/2003  10:43 PM            21,930 pinup4m_en.html
25/08/2003  11:59 PM            25,593 pinupcss_en.html
25/08/2003  11:57 PM            24,792 pinupjs_en.html
23/08/2003  02:59 PM             3,492 present0.html
23/08/2003  05:33 PM            20,463 present2_en.html
25/08/2003  11:52 PM            26,231 present3_en.html
23/08/2003  03:00 PM             3,688 present9.html
23/08/2003  05:34 PM            20,416 present_en.html
23/08/2003  05:35 PM            17,749 trans_en.html
              16 File(s)        275,268 bytes
               4 Dir(s)  10,211,815,424 bytes free
inserted by FC2 system