デザインの作品のひとつとして、↓のようなhtmlやスクリプト?を使った、画像クリックでアクションの起こる仕掛け絵本風のウェブページを作ろうとしています。
http://soraomoi.michikusa.jp/index.html
(知り合いのフリー作品です。残念ながら今現在連絡は取れないのですが、転載許可は以前にもらっています)
これと同じような形式のページが作りたい場合、画像形式は決まっているのか(GIF以外でも作れるのかや重さに制限はあるのかなど)、音を組み込んだりもっと凝った事が出来るのか…などが知りたいです。
恐らくWEBページの形式としては少し古い作り方なのかな?と思いますが(この作品以外では、FLASHが出てくるより前に作られた古いサイトなどでしか見かけたことがないので…)画像と言語命令だけでどれくらいアクティブな事が出来るのか詳しく知りたいです。
また、こういったページの作り方がわかるサイトなどありましたら(多少古くてもかまいませんので)是非教えてください。
その他にも何かアドバイスなどがあればお願いします。
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/h …
そして同じく <a hlef> でそれぞれのページが開きます。
地球儀をクリックしたページで出てくる
「壊れる前に。」という動く文字は JavaScript で動かしています。
<head>~</head> 間に次のスクリプトを記入しています。
<SCRIPT Language="JavaScript">
<!--
str="壊れる前に。";
count=0;
function Typing(){
txt=str.substring(0,count++);
if(document.all) document.all["TypingWord"].innerHTML=txt;
setTimeout("Typing()",150);
}
// -->
</SCRIPT>
この大まかな意味は、
HTML内に表示されている部分の TypingWord オブジェクトの文字を
150ミリ秒間隔で1文字ずつ加算しながら書き換えて表示する
という内容です。
<body> 内には <SPAN id="TypingWord"> という部分が用意せれていますから、
ここの部分に 「壊れる前に」 という文字列が1文字ずつ表示されます。
-------------------
> 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 の広い分野を網羅したサイトなどあまりありません。
私が上で書いたように、
部分的にどうなっているのかを調べて、考えて、検索する。
というのが一番近道だと思います。
部分的にというのは「窓が開く部分」とか「クリックしたら違うページを開く部分」とかそういう部分です。
とりあえずやってみることは、
書かれていらっしゃるページの何もない部分を右クリック→「ソースの表示」などで、
「ソースを見る」ことではないでしょうか。
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ファイルを作成するソフトウェアが必要になります。
No.1
- 回答日時:
実に様々な方法があります。
昔はたくさん作りました。今それと同じものを作ろうとすると、現在のWeb標準に適合させるとなると、リンクを埋め込んで画像を使うことになると思います。
注意しないとならないのは、昔と違ってページにアクセスしてくるユーザーエージェントの種類がとても多いということです。パソコンあり--画面サイズは様々--、PDAあり、携帯電話あり、Wiiあり、サーチエンジンあり・・・
今はスタイルシートという方法がありますから、以前よりはるかに容易に--姑息な手段を使うことなく--出来るでしょう。前後のページや目次へのリンクをもつシンプルなHTMLを端末に合わせてスタイルシートで絵本風にデザインすればよいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- YouTube ユーチューブへの動画投稿にサムネイルを付ける方法は? 1 2022/07/21 23:45
- その他(アニメ・マンガ・特撮) 著作権について アニメのオタ活手帳に貼るために、ワンシーンやキャラクターの立ち絵などを印刷したいです 3 2023/03/07 17:26
- その他(動画サービス) TV(ブラビア等)で、動画(アマゾンプライム等)を確実に視聴するには 2 2022/11/26 17:58
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- その他(テレビ・ラジオ) 映像が現存していない日本の映画・ドラマ・アニメといえば何を思い浮かべますか? 4 2023/04/15 17:13
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAでマルチページの切...
-
パワーポイントで参照ページを...
-
各ページの1番上の表示について
-
UserForm.showでマルチページ1...
-
ログインしないとみることがで...
-
VBAでマルチページのページ指定...
-
TOMCATを入れたPCのHTMLが別PC...
-
ホームページを工事中にしたい。
-
楽天市場goldでTOP作成…商品ペ...
-
ホームページビルダーで作成の...
-
アクセス解析。「直前に見てい...
-
IE を開いてページ内のリンクを...
-
indexページをタイマーセットで...
-
異界の入り口(昔あったページ)...
-
ホームページ更新未経験者への...
-
一定の時間がたつと別のページ...
-
ワンクッションページの構造
-
パソコンの解像度を自動認識し...
-
<IFRAME>でコンテンツ部分のみ...
-
スクロールバーの挙動がおかしい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
パワーポイントで参照ページを...
-
<IFRAME>でコンテンツ部分のみ...
-
VBAでマルチページのページ指定...
-
エクセルVBAでマルチページの切...
-
単語を少し変えると1位になるの...
-
検索エンジンにインデックスさ...
-
TEX ページ番号について
-
検索順位が下がった
-
ワードはページ数イコール枚数...
-
ページの自動ジャンプを止めるには
-
地味なページはnofollowにする?
-
UserForm.showでマルチページ1...
-
リダイレクト前のURLをブックマ...
-
アクセス解析。「直前に見てい...
-
ビフォアーアフターのページは...
-
アクティブレポートの、ページ...
-
アクセス元URLをばれないよ...
-
vbsで開かれた別ウィンドウを制...
-
TOMCATを入れたPCのHTMLが別PC...
-
HTMLでリンクが表示されないの...
おすすめ情報