| |||||||||||||||||||
|
失礼してちょっとお尻を!
by Akira Kato
January 14, 2004
有名なハリウッド映画スターのお尻、あなた、言い当てられますか? もし言い当てられるようであれば、あなたはずいぶんとアメリカの芸能界の表と裏を知っているに違いありません。 もちろん、私も、アメリカの有名スターの、むっちりとしたお尻を見るの好きです。しかし、下の写真のお尻を言い当てるほどには、脳裏に焼き付けるほど、 しみじみと眺めたことがありません。 そんなわけで、言い当てられる人も、そうでない人も、楽しめるようにと、下のような仕掛けを考えてみました。 4つのお尻が見えていますが、それぞれのお尻をくりっくすると、それが誰だか分かるようになっています。 クリックしてみてください。
上の仕掛けは、下に示すような
<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つのタグの使い方は、次のページで説明しています。 どうして、4つでなく、5つかというと、上の写真の白地の部分が含まれているからです。 試しに、その白地の部分をクリックしてみてください。 5つのクリックに反応する部分を指定したら、今度はジャバスクリプトを使って、クリックした時に表示される、それぞれの女性の写真を、その部分に割り当てます。 白地の部分をクリックした場合には、写真を割り当てるのではなく、ALERT( )メソッド を使って、文字を表示するようにします。 このメソッドについては、このページで説明していますから、リンクをクリックして読んでください。 ジャバスクリプトを理解するためのメニュー ジャバスクリプトを HREF アトリビュートと共に使う場合には、次のように書きます。 <a href="javascript:alert('Thank you')">Click here!</a> <a href="javascript:void(0)">Click here!</a> すぐ上のリンクをクリックしても何もしません。しかし、あなたのコンピューターは VOID の括弧の中身を吟味したのです。 この場合、ゼロが記入されているということをあなたのコンピュータは理解しています。ただ、理解しているだけで、表示しません。 (おんぼろトラックをダブルクリックすると、元の絵が表れます。)
<a href="javascript:void 上のリンクをクリックすると、おんぼろトラックが現れます。
document.here.src='../images/drive.gif' この命令をコンピューターが実行すると、おんぼろトラックの絵が、Click here! と書かれた絵が占有している、ディスプレー・メモリーに入ります。 つまり、おんぼろトラックの絵が表示されるわけです。 このようにするためには、Click here! と書かれた絵に名前を付ける必要があります。この場合には、上のコードで示されているように、 NAME アトリビュートを使って here という名前が付けられています。 こうすることによって、絵を入れ替えて表示することが出来るわけです。 どうして VOID( ) を使うのですか? 確かに、そのような疑問が頭をもたげるかもしれません。
<a href="javascript: 下のリンクをクリックして試してください。奇妙なことが起こります。 (このページに戻るには、ブラウザーの『戻り』ボタンをクリックしてください。) ご覧になったように、おんぼろトラックではなく、 ../images/drive.gif という文字がスクリーンに表示されます。 このようなことが起こるために、VOID( ) を使うわけです。 次のように書いても、このようなことを防ぐことが出来ます。
<a href="javascript: コレは、ジャバスクリプトの欠陥の一つだと思います。
関連リンク
| ||||||||||||||||||
|