Beaverland
Net Art
Table of Contents

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　タグを使って幾つかに分けて、それぞれの部分がクリックした場合に違った反応を示すようにします。 　　　　こうすることで、一つの写真に写っている４つのお尻のどれか一つをクリックすると、その女性の全身写真が表示されます。

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

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.

Baud:

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.

ISDN:

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	Javascript animation 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

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

• If you don’t know how to use an IMG tag, please visit this page: How to Use an IMG Tag.
  
  
• For the TABLE Tag, please visit this page: How to Use a TABLE Tag.
  
  
• For more on colspan, please visit this page: ROWSPAN & COLSPAN Made Easy!
  
  
• Do you know the difference between SPAN and DIV?
  To get the answers, please visit this page: Do you really know the difference between <SPAN> and <DIV>?
  
  
• When you want to know more about an event handler such as onMouseOver, vist 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?
  
  
• For more on the spacer, please visit this page: What is a SPACER tag?
  
  
• If you want to know the void() method, please visit the previous page: How to Present a GIF Animation.
  
  

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) を使った８フレームの簡単なジャバスクリプト・アニメーション

配列(array)を使わずに、
ベティーさんを走らせるには
どうすればよいのか？

８フレームの簡単なジャバスクリプト・アニメーション

ロマンチックな雰囲気をかもし出そう！
(GIFアニメーション)

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

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

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

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

padding-top:355px;

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

height:600px;

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

ジャバスクリプトを使った簡単なアニメーションでベティーさんがウィンクします。コードは次の通りです。

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

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

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

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

それで、ベティーさんがウィンクをし始めるわけです。どのようにウィンクさせるかは、必要な材料が出揃った後で説明します。

前のページには、ボタンが付いていません。従って、ベティーさんは永遠にウィンクしっぱなしです。さぞかし疲れることでしょう。

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

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

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

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

タイマーを止める時には、次のようにします。

clearTimeout(validName)

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

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

ジャバスクリプトでは、小文字と大文字を区別していることを忘れずに！
従って、validName, validname, VALIDNAME は全く違った変数として扱われます。

最初の　INPUT タグ

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

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

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

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

sizeアトリビュートを使って５桁の数字であることを指定しています。

２番目の　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 はイベント・ハンドラーと呼ばれるものです。

onClick="クリックすると実行するステートメントをここに書く"

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

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

delayTimeが１０ミリセカンドより大きい場合には次の２つのステートメントを実行します。もし、同じか小さい場合は、何もしません。

delayTime -= 10

上のステートメントは下に示すステートメントと同じことを実行します。

delayTime = delayTime　-　10

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

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

var delayTime=3000

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

document.thisForm.delayNumber.value = delayTime

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

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

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

<form name="thisForm">

delayNumberは「テキスト窓」オブジェクトに与えられた名前です。

valueは、この「テキスト窓」オブジェクトに付随するテキスト・ストリングを保存する場所（メモリー）を意味します。

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

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

document.delayNumber.value = delayTime

onDblClick イベント・ハンドラー

ボタンをダブルクリックすると１０ではなく１００だけ減算されます。これだけが違うことで、それ以外のことは、クリックする場合と全く変わりません。

３番目の　INPUT タグ

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

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

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