A revolving earth (earthani.gif--64x64) Beaverland Net
Net Art
 
English Version (englishv.gif--140x51)

Beaverland Net Art logo (netart3.gif--140x365)

 

Beaverland Net English slangs not found in a dictionary logo (slangs.gif--140x260)

 

Beaverland HTML Made Easy! logo (html01.gif--140x160)

 

Beaverland Proverb logo (proverb1.jpg--140x280)

 

JavaScript Made Easy! logo (javascrt.gif--140x360)

 

Beaverland Idioms logo (idioms.gif--140x300)

 

Revised brand-new Japanese ancient history logo (jhist02.gif--140x300)

 

 

How to use the North-American Computer system in Japanese (jpnword.jpg--140x360)

 

Beaverland Japonica banner (japonic3.gif--140x360)

 

Study in Canada Home Page logo (homepg.gif--160x160)

 
失礼してちょっとお尻を!
January 14, 2004
 

 

有名なハリウッド映画スターのお尻、あなた、言い当てられますか?

もし言い当てられるようであれば、あなたはずいぶんとアメリカの芸能界の表と裏を知っているに違いありません。 もちろん、私も、アメリカの有名スターの、むっちりとしたお尻を見るの好きです。しかし、下の写真のお尻を言い当てるほどには、脳裏に焼き付けるほど、 しみじみと眺めたことがありません。

そんなわけで、言い当てられる人も、そうでない人も、楽しめるようにと、下のような仕掛けを考えてみました。 4つのお尻が見えていますが、それぞれのお尻をくりっくすると、それが誰だか分かるようになっています。 クリックしてみてください。

AOL Women Fitness four butts 
page (4butts.jpg--422x220) Butt 1 Butt 2 Butt 3 Butt 4 Please click each butt!

June changes clothes (june376x.gif--182x378)

 

上の仕掛けは、下に示すような
ジャバスクリプト・コードから
出来ています。

<img usemap="#butts" src="images/4butts.jpg"
  alt="AOL Women Fitness four butts page"
  width="422" height="220">

<map name="butts">

<area shape="rect" alt="Butt 1"
  coords="160,10,280,110"
  href="javascript:void
        (document.betty.src='images/church3.jpg')">

<area shape="rect" alt="Butt 2"
  coords="160,110,280,210"
  href="javascript:void
        (document.betty.src='images/lopez3.jpg')">

<area shape="rect" alt="Butt 3"
  coords="280,10,400,110"
  href="javascript:void
        (document.betty.src='images/theron3.jpg')">

<area shape="rect" alt="Butt 4"
  coords="280,110,400,210"
  href="javascript:void
        (document.betty.src='images/aguilera3.jpg')">

<area shape="rect" alt="Please click each butt!"
  coords="0,0,400,220"
  href="javascript:alert('ここではなく、
        お尻をクリックしてください。')">
</map>


<img name="betty" src="images/june376x.gif"
  alt="Betty changes clothes (june376x.gif--182x378)"
  width="246" height="442">

 

HTML という言葉は、ウエブページを作るときに使う言葉ですが、もし、 HTML というのが全く分からないようでしたら、このページを見てください。

HTML (Hypertext Markup Language) を理解するためのメニュー
(新しいウインドーが開きます。)

上のコードは、このHTMLで決められた、さまざまなタグを使って書かれています。絵や写真をウエブページに表示する時には、 IMG タグ を使うと表示できます。このページの写真や絵は、すべてこのタグを使って表示しています。

もし、IMGタグをコレまでに使ったことがないようでしたら、ぜひこのページを見てください。

IMG タグの使い方. (新しいウインドーが開きます。)

上の4人のお尻が写っている写真は一枚の写真なのですが、それぞれのお尻をクリックすると、その女性の写真が表示されるようにするために、 一枚の写真を5つに分割しています。もちろん、切り離しているわけではありません。上のコードで示したように、HTML の MAP タグと AREA タグを使うと、 そうすることが出来ます。 この2つのタグの使い方は、次のページで説明しています。

<MAP> タグと <AREA> タグの使い方.

どうして、4つでなく、5つかというと、上の写真の白地の部分が含まれているからです。 試しに、その白地の部分をクリックしてみてください。

5つのクリックに反応する部分を指定したら、今度はジャバスクリプトを使って、クリックした時に表示される、それぞれの女性の写真を、その部分に割り当てます。 白地の部分をクリックした場合には、写真を割り当てるのではなく、ALERT(  )メソッド を使って、文字を表示するようにします。 このメソッドについては、このページで説明していますから、リンクをクリックして読んでください。

ジャバスクリプトを理解するためのメニュー
(新しいウインドーが開きます。)

ジャバスクリプトを HREF アトリビュートと共に使う場合には、次のように書きます。

Click here!

<a href="javascript:alert('Thank you')">Click here!</a>

Click here!

<a href="javascript:void(0)">Click here!</a>

すぐ上のリンクをクリックしても何もしません。しかし、あなたのコンピューターは VOID の括弧の中身を吟味したのです。 この場合、ゼロが記入されているということをあなたのコンピュータは理解しています。ただ、理解しているだけで、表示しません。

Click here! icon (click01.gif--96x96)

(おんぼろトラックをダブルクリックすると、元の絵が表れます。)

<a href="javascript:void
  (document.here.src='../images/drive.gif')">
<img name="here" border="0" src="../images/click01.gif"
  alt="Click here! icon (click01.gif--96x96)"
  width="96" height="96"></a>

上のリンクをクリックすると、おんぼろトラックが現れます。
この場合、あなたのコンピューターは括弧の中身を吟味します。前と違って数値ではなく、ジャバスクリプトの命令が入っているので、 コンピュータは、下に示す命令を実行します。

document.here.src='../images/drive.gif'

この命令をコンピューターが実行すると、おんぼろトラックの絵が、Click here! と書かれた絵が占有している、ディスプレー・メモリーに入ります。 つまり、おんぼろトラックの絵が表示されるわけです。

このようにするためには、Click here! と書かれた絵に名前を付ける必要があります。この場合には、上のコードで示されているように、 NAME アトリビュートを使って here という名前が付けられています。 こうすることによって、絵を入れ替えて表示することが出来るわけです。

どうして VOID( ) を使うのですか?
直接命令を書いたらどうなります?

確かに、そのような疑問が頭をもたげるかもしれません。
では、どうなるか、実際に、やってみましょう。 下に示したように、VOID( ) を取り除いてコードを書きました。

<a href="javascript:
      document.here.src='../images/drive.gif'">

下のリンクをクリックして試してください。奇妙なことが起こります。

Click here! icon (click01.gif--96x96)

(このページに戻るには、ブラウザーの『戻り』ボタンをクリックしてください。)

ご覧になったように、おんぼろトラックではなく、 ../images/drive.gif という文字がスクリーンに表示されます。

このようなことが起こるために、VOID( ) を使うわけです。 次のように書いても、このようなことを防ぐことが出来ます。

<a href="javascript:
    document.here.src='../images/drive.gif';void(0)">

Click here! icon (click01.gif--96x96)

コレは、ジャバスクリプトの欠陥の一つだと思います。
完璧なソフトというものはありません。なぜなら、人間が作ったものですから。神様でない限り、人間は完璧ではありませんよね。 当然、人間が作ったソフトですから、バグがつき物です。

 

関連リンク





Rate article:
Excellent Good Neutral Poor Worst

Your Name:
Your Email Address:
Comments:


  Comments
 
ダブルクリックはどのように使うんですか?
    - グレゴリ・スタンスキー

このページで示したダブルクリックを使った具体例のコードは、すべて書き出すと次のようになります。

<a href="javascript:void
  (document.here.src='../images/drive.gif')"
  onDblclick="document.here.src='../images/click01.gif'">
<img name="here" border="0" src="../images/click01.gif"
  alt="Click here! icon (click01.gif--96x96)"
  width="96" height="96"></a>

ダブルクリック (onDblClick) と呼ばれるイベント・ハンドラーを使っているんです。

詳しいことは次のページを見てください。
イベント・ハンドラーの使い方.

    - Akira

 
 
筆者紹介
Akira Kato (kato.jpg--180x135)
  • 日本とカナダの大学で教育を受ける。
  • 横浜にある大手の電器メーカーでコンピューターのソフトウエアの開発に従事する。
  • カナダのノースウエスト隼州政府・財務省に勤務する。
  • バンクーバーのランガラ・カレッジおよびサレーのクワンテレン・カレッジで講師を勤める。
  • ヨーロッパ、東南アジア、中国、北米を幅広く旅行する。
  • 現在、経営コンサルタント、フリーランス・ライターとして活躍している。

Beaverland ジャポニカ
Re-Discover JAPAN
inserted by FC2 system