ベストアンサー

画像上をクリックする絵本風ページを作りたいのですが

2008/12/27 04:29

デザインの作品のひとつとして、↓のようなhtmlやスクリプト？を使った、画像クリックでアクションの起こる仕掛け絵本風のウェブページを作ろうとしています。 http://soraomoi.michikusa.jp/index.html （知り合いのフリー作品です。残念ながら今現在連絡は取れないのですが、転載許可は以前にもらっています）これと同じような形式のページが作りたい場合、画像形式は決まっているのか（GIF以外でも作れるのかや重さに制限はあるのかなど）、音を組み込んだりもっと凝った事が出来るのか…などが知りたいです。恐らくWEBページの形式としては少し古い作り方なのかな？と思いますが（この作品以外では、FLASHが出てくるより前に作られた古いサイトなどでしか見かけたことがないので…）画像と言語命令だけでどれくらいアクティブな事が出来るのか詳しく知りたいです。また、こういったページの作り方がわかるサイトなどありましたら（多少古くてもかまいませんので）是非教えてください。その他にも何かアドバイスなどがあればお願いします。

bluebook
お礼率50% (34/68)

ホームページ作成ソフト
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

BlurFiltan
ベストアンサー率91% (1611/1754)

2008/12/27 09:34 回答No.2

最初のページ、窓にマウスが乗ると窓を開く部分は、当たり前ですが、窓を開いているわけではなく、画像を他の画像とそっくり入れ替えています。「カメラ的日乗3.0 マウスオーバーで画像を変える方法」 http://suigei.blog10.fc2.com/blog-entry-280.html その窓をクリックすると <a hlef> で次のページが開きます。「他のページにリンクする a href」 http://mbsupport.dip.jp/hp/hpr01.htm 次のページに移って、机の地球儀などにはクリッカブルマップを使用しています。「HTML入門上級編クリッカブルマップ」 http://www008.upp.so-net.ne.jp/netbegin/tetori/html/c030/p030.htm そして同じく <a hlef> でそれぞれのページが開きます。地球儀をクリックしたページで出てくる「壊れる前に。」という動く文字は JavaScript で動かしています。 <head>～</head> 間に次のスクリプトを記入しています。 <SCRIPT Language="JavaScript">  </SCRIPT> この大まかな意味は、 HTML内に表示されている部分の TypingWord オブジェクトの文字を 150ミリ秒間隔で１文字ずつ加算しながら書き換えて表示するという内容です。 <body> 内には <SPAN id="TypingWord"> という部分が用意せれていますから、ここの部分に「壊れる前に」という文字列が１文字ずつ表示されます。 ------------------- > FLASHが出てくるより前に作られた古いサイトなどでしか > 見かけたことがないので… クリッカブルマップは IE2 からサポートされていて、その IE2 リリースは 1995 年です。 Flash1.0 は 1997年リリースですから、そうですね、Flash 以前からでも同様のサイトはあったと思います。（HTMLで四苦八苦して不完全なものを作成するより、　Flashで楽々に完全に近いものを作成する方が良いので　そののちにだいたいはFlashにとってかわられましたね。） > どれくらいアクティブな事が出来るのか詳しく知りたいです。 HTML と CSS と JavaScript を用いればかなりなことができますよ。それと、かかれていらっしゃるサイトは単にどこにでもある「普通のサイト」です。違う点は、クリッカブルマップを主体としているかしていないかだけです。したがって、「HTML と CSS と JavaScript でできることなら全てできる」というのがこれの回答になります。 > こういったページの作り方がわかるサイトなどありましたら >（多少古くてもかまいませんので）是非教えてください。全てのサイトです。今見ていらっしゃるこのページ（教えて!goo や OKWave）も含めて、また、ご質問で書かれていらっしゃるページも含めて、全てのページが参考サイトです。書かれていらっしゃるサイトのページは、どちらかというとかなり簡単なことばかりの集合でできています。かなり簡単なことばかりですが、 HTML JavaScript CSS の全ての分野に関係したことを利用されたサイトです。「簡単だけど分野は広い」つまり「広く浅い」というのが特徴です。 HTML や JavaScripr や CSS の広い分野を網羅したサイトなどあまりありません。私が上で書いたように、部分的にどうなっているのかを調べて、考えて、検索する。というのが一番近道だと思います。部分的にというのは「窓が開く部分」とか「クリックしたら違うページを開く部分」とかそういう部分です。とりあえずやってみることは、書かれていらっしゃるページの何もない部分を右クリック→「ソースの表示」などで、「ソースを見る」ことではないでしょうか。

その他の回答 (2)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2009/01/02 10:05 回答No.3

index.htmlに使われているような画像を変える方法はJavaScriptによるもので、「ロールオーバー」で検索してください。参照サイトのページでは、以下の部分がそれに当たります。 <a href="top.html"><img src="s/window.gif" onmouseover="this.src='s/windowop.gif'" onmouseout="this.src='s/window.gif'" alt="ENTER" border="0"></a> 次のページのtop.htmlに使われている、画像のクリックする場所によってジャンプするページが変わる、というのは、「クリッカブルマップ」で検索すると作り方を解説しているサイトがありますので、それを参考にしながら作ってみてください。参照サイトのページでは、<map><area>の部分がそれにあたります。＊注: 英語ではImage mapと言いますので、最近は英語読みの「イメージマップ」という呼ぶ人も増えてきています。クリックできる場所をピクセルで指定しなければならないため、 HomepageBuilderやDreamweaverなどのオーサリングソフトを使うかクリッカブルマップ作成ツールなどが便利です。 > 画像形式は決まっているのか（GIF以外でも作れるのかや重さに制限はあるのかなど）、音を組み込んだりもっと凝った事が出来るのか… 画像形式、画像サイズ、ファイルサイズに制限はありません。音の組み込みは、JavaScriptを使えば可能ですが、マウス操作などと音のタイミングがずれる可能性があります。 Flashならこのタイミングをかなり正確にできるメリットがありますが、作るにはFlashやActionScriptの知識と、swfファイルを作成するソフトウェアが必要になります。

ORUKA1951
ベストアンサー率45% (5062/11036)

2008/12/27 09:27 回答No.1

実に様々な方法があります。昔はたくさん作りました。　今それと同じものを作ろうとすると、現在のWeb標準に適合させるとなると、リンクを埋め込んで画像を使うことになると思います。　注意しないとならないのは、昔と違ってページにアクセスしてくるユーザーエージェントの種類がとても多いということです。パソコンあり--画面サイズは様々--、PDAあり、携帯電話あり、Wiiあり、サーチエンジンあり・・・　今はスタイルシートという方法がありますから、以前よりはるかに容易に--姑息な手段を使うことなく--出来るでしょう。前後のページや目次へのリンクをもつシンプルなHTMLを端末に合わせてスタイルシートで絵本風にデザインすればよいです。