• ベストアンサー

トップ内にある画像を数秒間、大きく表示してから、通常表示状態にしたい

はじめまして、初心者ですのでよろしくお願いします。自分が作成しているHP(ホームページビルダー使用)ですが、閲覧者がトップ(index.html)を開いた時、トップ内に添付したある画像(jpeg)を数秒間、大きく表示してから、通常表示状態になるようなページを考えています。(その画像を皆さんに見てもらいたいので・・・)このやり方が説明されているWEBや方法をご存じの方、是非とも御教示ください。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

◆大きい画像のページと通常表示のページを用意しておいて、大きいもの  をindex.htmlにしておき、metaでhttp-equiv="refresh" content="5"  などで通常表示のページをロードするようにしておけばよいのでは?  (環境によっては、ロードする時間がプラスされますが…) ◆スクリプトを使ってもよいのなら、例えばこんな感じ? (『ある画像』はIDで指定。『数秒間』は5秒に設定してあります。  サンプルなので、幅・高さ・座標計算などは少々いい加減です。) <html> <head> <script type="text/javascript"> var d = 30, spd = 15, stopt = 5000; ID='special_image'; var tID,img,ew,eh,dw,dh,ex,ey,dx,dy; window.onload = function() { var e = document.getElementById(ID); if (e){ img = e.cloneNode(true); img.style.zIndex = 100; img.style.position = 'absolute'; img.style.display = 'none'; ew = e.offsetWidth; eh = e.offsetHeight; ex = e.offsetLeft + ew/2; ey = e.offsetTop + eh/2; while (e.offsetParent){ e = e.offsetParent; ex += e.offsetLeft; ey += e.offsetTop; } var w = window.innerWidth; var h = window.innerHeight; if (!w) { w = document.body.clientWidth; h = document.body.clientHeight; } dx = (w/2-ex)/d; dy = (h/2-ey)/d; if (ew<1 || eh<1) return; var n = Math.min(w/ew, h/eh)-1; dw = n*ew/d; dh = n*eh/d; document.getElementsByTagName('BODY')[0].appendChild(img); move(1); } } function move(){ var s = (move.arguments.length)?stopt:spd; if (d>0){ var w = ew + dw*d; img.style.left = ex + dx*d -w/2; var h = eh + dh*d; img.style.top = ey + dy*d - h/2 img.style.width = w; img.style.height = h; img.style.display = 'block'; d--; tID = setTimeout(move, s); } else { img.parentNode.removeChild(img); } } </script> </head> <body> <div style="float:right;"> <p> <img id="special_image" src="A.jpg"> </div> </body> </html>

jj1lwi
質問者

お礼

早速、大変詳細なアドバイス、誠にありがとうございました。なんとか思い通りのHPが出来るよう、挑戦してみます! <m(__)m>

関連するQ&A

  • トップだけ何も表示されません

    メモ帳でHPを作っています。 トップページが何も表示されません、 FFFTPにアップロードした後、 「メモ帳で開く」にすると、ちゃんと ソースが書いてあるのですが、 「開く」にすると真っ白です。 同じ作り方(メモ帳)で作ってる他の ページは「開く」で見ても、ソースが書いて あり、ウェブ上でもちゃんと画像なども表示されます。 トップページもメモ帳でタグなど打ってるのですが、 「開く」にすると何も書かれてません どうしたらいいでしょうか? トップはindex.htmlで保存してあります

  • 画像が表示されない

    昨日からHPを作り始めた超初心者です。 今、最初のページを作っているところなのですが、 文字はちゃんとweb上に表示されますが、画像が表示されず×になります。 使っているのはパソコンに入っていたビルダーで、FFFTPソフトで転送しています。 画像はデジカメで撮ったもので、JPEG形式で画素数は小さくしています。ビルダーのプレビュー画面ではちゃんと画像は表示されています。転送するときはエラーなどは出ず、「転送が完了しました」となります。 どうやったらうまく表示されるのでしょうか。 パソコンを使い始めて4年ほど経ちますが、ホームページ作成に関しては超初心者などで、分かりやすく教えていただきたいです。お願いします。

  • TOPページが表示されません。

    はじめてHPビルダーを使い、HPを作成している者です。よろしくお願いします。 海外旅行に行き、デジカメでたくさん写真を撮ってきたので、これをHP上に公開したいと考えました。 しかし、写真主体のページにしたいので、フォトギャラリーを作ろうと思い、まずは、Photoshop Elements3.0のWebフォトギャラリー機能を使い写真を整理しました。  私としては、トップページは自分で独自に作成したいので、トップページを作成し、ビルダーの操作の中で、トップページとして指定し、エレメンツで作ったフォトギャラリーのINDEXというファイルとリンクさせました。 ところが、サイトを転送させ、インターネット上で確認してみると、WEBフォトギャラリーで作ったページが先に表示され、自分で作ったトップページはどこにも表示されません。  HPの知識のあまりない私のことですので、何かリンクの張り方に問題があったのでしょうか?  (そもそもこんなことをする人は、あまりいないのかもしれませんが・・・)  どなたか解決策のヒントでも構いませんので、提供していただけないでしょうか?

  • ホームページビルダー 画像 表示されない

    ホームページビルダーを用いてホームページを作成しました。 http://waterbus.web.fc2.com/top.html このサイトなんですが、見てもらったらわかるように、トップページは何の問題もないのですが、 こちらのLiveというページで画像がなぜか表示されません。 http://waterbus.web.fc2.com/live.html ネットで検索して、考えられることは全て確認してみましたが、問題ないように感じます。HPスペースの容量もまだ十分残っています。 第一、ページの左はしにあるメニューリストは、トップページのあるものと同じものを読み込んで使用しているので、表示されないわけがないのに・・・・ どなたか、解決策を教えていただけないでしょうか。。。 ひとつひとつ試していきますので、よろしくおねがいします。

  • トップページの画像が表示されません

    HPビルダーV10で、初めての製作です。 転送は完了できたのですが、Web上で確認すると、Topページだけの画像個所に「赤×」マークが出ていて画像が表示されません。 他ページへのリンクは、正常にリンクします。 また、他のページからTopページへ移動すると、正常に画像が表示されます。 他のページにも同じ画像を使っているのですが、こちらは正常に表示されます。 半角英数字の統一や、転送設定は確認しました。 ファイル転送で確認したところ、必要なファイルはサーバーに転送されているようなのですが。 その他に修正しなければならないことがあるのでしょうか? 同じような経験をされた方がいらしたら、アドバイスお願いいたします。

  • 画像の表示について。

    HPビルダーで作成したページについてです。画像等をTOPページに幾つか載せているのですが、その画像を見れるパソコンと見れないパソコンがあります。もちろん自分のパソコンでは全てみれます。知人のパソコンからは見れないということでした。見れるヒトと見れない人がいるようなのです。ちなみに見れないパソコンから、自分も見ましたが、表示されない画像の上で右クリックをし、プロパティを開いたところ、サイズが-1バイトと表示されていました。どのような原因が考えられるでしょうか?またWEB上で誰でも見れるように画像などを載せるにはどうすればいいのでしょうか?分かる方いましたらご教示ください。宜しくお願い致します。

  • ホームページのトップページについて

    こんばんは。 OSはWIN XPです。 ホームページビルダー10で悪戦苦闘しながら、HPを作っています。 「スタンダードスタイル」「標準モード」で作っています。 トップページの件でお伺いします。 当方、トップページに15個くらいのロゴか画像を配置し、それぞれの ロゴや画像をクリックしたら、該当ページに飛ぶようなHP構成を考えています。情報源が曖昧なのですが、「HPのトップページはインデックス的なモノなのだから、あまりトップページに『情報量』を多くすると、HPを閲覧した人が、トップページを全部開くのに時間がかかりすぎてイライラしてしまう」と聞いた事があります。 「情報量の多すぎるトップページ」とはどれぐらいの「ボリューム」を 指すのでしょうか。 詳しい方、教えて下さいませんか。 よろしく御願いします。

  • HP作成(トップページ)表示について

    初めて質問します。 Dreamweaver4j、Fireworks4、Flash5jでHPを作成しました。IEでHPを見たときにトップページが表示される時に画面がパズルみたいにパラパラと表示されます。トップページはFireworksで作成してDreamweaverに取り込んでいます。 index.htmは16KBです。画像(JPEG)が多いので圧縮しました。自分ではそんなに重たいページではないと思うのですが・・・ 分かりにくい質問ですいません。よろしくお願いします。

  • トップ画像をアクセスする度に変わるようにするには?

    トップ画像をアクセスする度に変わるようにするには? ホームページビルダー6を使って作成しているのですが、 ホームページのトップ画像を、閲覧者がアクセスする度に、事前に登録したいろいろな画像に変わるように表示したいのですが、どのような方法がありますでしょうか? 初心者ですので、わかりやすい方法や、タグなど、教えてくださると幸いです。 どうぞよろしくお願いします。

  • カウンターが表示されない

    HPビルダー8でジオシティーズにホームページを作りました。 携帯用のページも作って ナビメニュー→その他の挿入→アクセスカウンターを設置したのですが、 webでカウンターが表示されません。 http://geocities.yahoo.co.jp/stats/setup というページで 「カスタマイズ可能なカウンタをホームページに追加します。」 ということでindex.htmにチェックを入れて作れば大丈夫だと思いますが、 (実際にトップページではこのようにして設置しました) 今回のようにHPビルダーで作ったものを機能させるにはどうしたらいいのでしょうか。