• ベストアンサー

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

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

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

  • ベストアンサー
  • BlurFiltan
  • ベストアンサー率91% (1611/1754)
回答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"> <!-- 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ミリ秒間隔で１文字ずつ加算しながら書き換えて表示する という内容です。 <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)

回答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)
回答No.1

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

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • フロントページエクスプレスと.png画像

    レンタルして使っているお絵描き掲示板に投稿したイラストを、保存してひとつのページに載せてマイサイトにアップしようとしたのですが、ページを作る時点で問題が起こってしまいました。 フリーソフトのフロントページエクスプレスで画像を載せる予定のページをつくり一旦保存します。（このときはまだ画像を貼り付けていません）そのあと、既に保存してFFFTPで転送しておいたpng画像を貼り付け再びページを「保存」しようとすると、「このファイルを保存しますか？」とpng形式の画像をgif形式で保存するかどうかを訪ねる窓が開きました。png画像のままで載せたいので「いいえ」をクリックするとページが保存されません。 仕方がないのでgif形式で画像を保存すると、ちゃんとページは保存されるのですが、次にページを開いた時にpng形式で貼り付けていた画像がgif形式に変わっています。その上、gif形式では画像が粗くガサガサになってしまいます。 今までサイトにアップしてきたのはgif画像かjpg画像だったので、png画像でこんな問題があるとは思いませんでした…。png画像は見れる人が限られるそうでgifの方が都合が良いとはおもうのですが、やはり綺麗な状態の絵を載せたいので困っています。 同じお絵描き掲示板に投稿したイラストでも、jpg形式とpng形式の二つに分かれていて、jpg形式ならば問題なくページは保存できて、gif形式に変えるよう勧告が出てきたりはしませんでした。 ちなみにpng形式の画像をgif形式にではなく、jpg形式で保存してみると、gif画像に変えてみた時と同じことが起こりました。ページは保存できるけれど、画像は粗くなってしまうのです。 「それは仕方がないよ」でも良いのでアドバイスをお願いします。質問の内容が説明不足でしたら補足します。よろしくお願いします。 　※使用しているのはWindowsXP（ブラウザはIE6）です

  • 画像クリックで画像変化を1ページに複数表示

    どのJavaScriptサイトにも記載されていなかったので、こちらでお尋ねします。どなたかご存知だったら、教えてください。 changeImageと<a href=""></a>を使って、クリックして画像を変えるっていうのをやっているのですが、同じページでの複数表示のやり方がわかりません。 それと、2つの画像を変化させて、他のアイコンを作ってそこを押すと元の画像に戻るというのは、可能でしょうか？ ４つ画像を用意して、２つまでしか画像変化できないようにさせて、取り消しアイコンで元の画像に戻す・・・ということがやりたいのですが。 今はこんな感じの記述ができています。 <SCRIPT type="text/javascript"> function changeImage() { var imgname = document.images[0].name; if(imgname == "01"){ document.images[0].src = "02.gif"; document.images[0].name = "02"; } else { document.images[0].src = "01.gif"; document.images[0].name = "01"; } } </SCRIPT> </head> <body> <a href="JavaScript:changeImage()"> <img src="01.gif" name"01" border=0></a>

  • しかけ絵本を作るためのネタを探しています

    手作り絵本のサークルの課題で、次回の展示会までに、あるテーマに沿ったしかけ絵本を作ってくることになりました。 内容は何でもいいのですが、しかけが決まっています。 ページを３等分（いくつでもOK）し、それぞれに絵を描き、上をめくったり、真ん中をめくったり・・・といったものです。 イメージは昔のぬり絵の着せ替えのようなものです。（顔・上半身・下半身に分かれていて、真ん中だけめくると服が変わったり、下だけめくってスカートがズボンになったり・・・） ２カ月以上悩んでいるのですが、どうしても着せ替え以外思い浮かびません。 「しかけ絵本」で検索をかけても、ポップアップがほとんどで、ピッタリのものにヒットしません。 どなたかこんなのを見かけたことがあるよ、とか、こんなサイトがあるよとか、よいお知恵をいただけませんでしょうか。

  • あるgif画像（A.gifとします）をキーボードの矢印キーの入力によっ

    あるgif画像（A.gifとします）をキーボードの矢印キーの入力によって動かし、 A.gifが、配置してある別の画像（1～4.gif）と触れたときに、リンクへジャンプする、 といった仕掛けのWebサイトを、JavaScriptを利用して作りたいと思っています。 今のところ、A.gifが移動し、ある1点の座標（x,y）に重なったとき、リンクへジャンプするというプログラムはできたのですが、 ある一定の範囲にA.gifが触れたときにリンクへジャンプするという命令の方法がよくわからず、困っています。 つまり、範囲を点ではなく、四角にする方法が知りたいのです。 どなたかご教授願います。

  • Word97でgif画像が読み込まれません。

    こんばんは。 知人に頼まれて、Word97を使ってWebページを作ってみせたのですが、GIF形式の画像が読み込んでもらえず困ってしまいました。 JPEGは大丈夫です。 読み込むとき、ファイル形式の選択画面で、「全てのファイル形式」を選ばないとgifが表示されません。 そして、GIFを選択すると、「ファイルの形式を選んで…」みたいなダイアログが表示されます。 Word97はGIF形式に対応していないのでしょうか? それとも設定に問題があるのでしょうか? よろしくお願いいたします。

  • VISIO2002で1ページ目に画像を貼ると極端に重くなります

    VISIO STANDARD 2002を使っております。 画像を1ページ目に貼るとVISIOファイルのサイズがとても大きくなりませんか？ 1MBのTIFF画像を1ページ目に貼るとファイルサイズが16.6MBになるのに対し、2ページ目以降に貼ると1.59MBになります。 画像形式をGIFデータなどにして試しても同様でした。 何か設定などがあるのでしょうか。

  • 画像のロールオーバーとアクティブページでの画像ロールオーバーについて

    javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ（アクティブページ）のメニュー画像をロールオーバー（ロールオーバーをオンマウス状態に）させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

  • 携帯サイト作成：TOPページの画像をアクセスの度に違う画像を表示するには？

    すみません、どなたか教えてください。 携帯サイトを作成しております、 TOPページの画像をアクセスの度に違う画像を表示したいのですが、 こちらのサイトを見ながら ​http://www.sky.sannet.ne.jp/masapine/java_gazou4.html​ やってみました。 <SCRIPT LANGUAGE="JavaScript"> <!-- simg=new Array(5); simg[0]="images/icons1.gif"; simg[1]="images/icons2.gif"; simg[2]="images/icons3.gif"; simg[3]="images/icons5.gif"; simg[4]="images/icons8.gif"; Myimg=Math.floor(5*Math.random()); document.write("<center><img src='"+simg[Myimg]+"'></center>"); //--> </SCRIPT> このソースをＢＯＤＹ区間に張り付ければできるのでしょうか、、 また、　　images/icons1.gif　　この部分では、gif画像ファイルの位置などを記している様子がないのですが、このgif画像ファイルはどのフォルダに配置すればよいのでしょうか、、 すみません、どなたかわかるかたおりましたら、なにとぞよろしくお願いいたします。

  • アクションスクリプトに画像を読込みたいのですが・・・

    アクションスクリプトに書き出すシンボル化した画像が、汚くなります。（ふちがガタガタで、ぼやけます） jpegやgifを読み込んでシンボル化してるのですが、 このとき、何か注意すべき点などあるのでしょうか？ どなたか教えて下さい。よろしくお願いします。

  • mht形式のWebページの保存について

    IE5.5で、Webページを「Webページ 完全」で保存し、 そのローカルのhtmlファイルを編集保存した後、 ブラウザ上から「Webアーカイブ 単一のファイル(*.mht)」 形式で保存すると、なぜか、Web上から保存した場合と違って、 gifなどの画像ファイルが、単一のファイルとして、 まとめて保存できません。 うまく、mht形式で、まとめて保存する方法はないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する