• ベストアンサー

画像にアニメーションGIFを重ねたい・・・

ホームページ上の画像(jpg)にGIFアニメーションを重ねたいのですが、どのようにしたらよいのでしょうか。 具体的には、地図の画像があり、その上に場所を示すため、点滅するボールのGIFアニメーションを載せたいのです。 使用しているものは、ウインドウズ、ページミル3.0、フォトショップ5.5です。 素材サイトからボールのアニメーションはダウンロードしたのですが、どうにもうまく行きません。 どうぞよろしくお願い致します。

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

  • ベストアンサー
  • sight
  • ベストアンサー率53% (199/370)
回答No.2

一般的に、ダイナミックHTMLのレイヤー機能を用いるかとおもいます。 これは、JPEGの上に載せたいGIFの大きさのレイヤーを作って、その上にGIF画像をのせ、それをHTML上で置きたい場所に座標指定して表示します。 ただ、IEとNN両方で通用するソースを書くのはちょっと長くなりますし、ページ制作ソフトを使っているとのことなので、直接のソース編集はやっていないと思います。 ページミル3.0が、ダイナミックHTMLのレイヤーに対応しているならばその機能を探し出して使ってください。(DreamWaverなどが比較的こういった要素得意だったと思うのですが、ページミル3.0は一度も触ったことがないので分かりません・・・) また、その地図がGIFでも問題ないのならば、PhotoShopで全体をアニメーションGIFで作ってしまうというのも一つの手だとお思います。ImageReadyを使えば、画像のほんの一部分(要するにボールの範囲)だけをアニメーション化することもできると思いますので、アニメーションGIFにしたからと言ってそれほどファイルサイズが大きくはならないと思います。

singlemalt
質問者

お礼

早速のアドバイスをありがとうございます。 そうですね、ImageReadyを使えばうまくいくかもしれませんね。 早速試してみます。どうもありがとうございました。

その他の回答 (2)

  • ARC
  • ベストアンサー率46% (643/1383)
回答No.3

スタイルシートを使えばいいかも。 以下のような感じでHTMLを書いてみてください。 下記のHTMLをそのまんまコピー&ペーストして、ファイル名だけ変えたら、多分、正 常に動きます。 背景を(50,50)の座標(単位:ピクセル)に表示し、アニメーションGIFを(75,55)の座標 に表示します。 IE4.0以降、Netscape4.0以降で表示可能なはずです。 ****ココカラ**** <!doctype html public "-//W3C//DTD HTML 4.0//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>test</title> </head> <body> <p> ほげほげほげ </p> <p> <img src="Haikei.jpg" style="position:absolute; top:50px; left:50px"> <img src="Anime.gif" style="position:absolute; top:100px; left:100px"> </p> <p style="margin-top:510px"><!--画像の高さの分だけ位置をずらす--> もがもがもが<br/> もがもがもが<br/> もがもがもが<br/> </p> <p> ふごふごふご<br/> ふごふごふご<br/> </p> </body> </html>

singlemalt
質問者

お礼

早速のご回答ありがとうございます。 本来ならソースをきちんと理解してやるべきなのでしょうが、私はまだ理解不足で作成ソフトでやっています。 まず先にアドバイス頂きました方法でやってみて、うまくいかなかったら挑戦してみます。 ご丁寧にどうもありがとうございました。

  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.1

地図の画像を、指し示したい地点の数だけ ■■■■ ■■■■ ■■■■ のように分割します。 そしてそれらをテーブルに組み、各セルの背景(BACKGROUND)として表示させます。 さらに各セルにIMGタグでアニメーションGIFを重ねればOKです。

singlemalt
質問者

お礼

早速のアドバイスをありがとうございます。 なんとなく私でもできそうな感じなので試してみます。 どうもありがとうございました。

関連するQ&A

  • gifアニメーションを作りたいのですが・・・

    GIFアニメーションを作りたいと思って フリーソフトをダウンロードしてみたのですが それにはGIF形式の元になる画像が必要なんですが ウィンドウズのマイピクチャなんかでGIF形式に保存しなおすと 画像が汚くなりますよね・・・ 減色させて保存すればいいのでしょうか? でも こういうことは初めてなので 何をどうしたら良いのか全然わかりません 超初心者の私に何方か教えていただけませんか? 回答待っていますm(__)m

  • アニメーションGIFの保存方法

    ホームページの素材コーナーなどに置いてあるアニメーションGIFは、どのように保存すればいいのでしょうか?普通に「画像を保存」で保存すると、ワンカットだけになってしまうので、使えずに困っています。教えて下さい。

  • アニメーションGIF素材の無料素材集サイトを教えて下さい。

    アニメーションGIFの無料素材がダウンロードできるホームページを教えて下さい。 特に、犬とか猫の動物素材があるとうれしいです。 windows用です。 よろしくお願いします。

  • GIFの画像を開くとなくなっている。どうして?

    GIFの画像をIEで開くと画像がないのはなぜなのでしょうか? ウェブページを初作成していて貼り付けていた画像が なくなったので変だと思い、気づきました。 色々試してみたのですがどうしてもIEで開くと画像がないのです。 GIFを開くアプリケーションは最新のIEをつかっています。フォルダオプションのファイルの関連付けの中の何かがお かしいのでしょうか?ちなみにJPG画像はIEでちゃんと開けて画像が表示されます。 また、適当なウェブページを丸ごとダウンロードしてGIFを開いてもダメでした。 フォトショップでウェブ用にGIFで保存した画像も開くと画像がないです。 本当に不思議でなりません。どなたかわかる方よろしくお願いします。

  • GIFアニメーションのDL

    素材屋さんからGIFアニメーションの画像をDLしたいのですが、画像の上で右クリックで画像を保存を選ぶと、時々ファイルの種類のところが「BMP」になってしまって、アニメーションではなく保存されてしまいます。 どうしてこうなってしまうのでしょう? 困っています。 直し方分かる方、教えてください。

  • IEで画像をひっぱると。

    こんにちは。 ネットから、素材やら、画像やらを引っぱってきて フォトショップで開こうとすると、必ずビットマップになってしまいます。 保存方法にGIFもJPGもありません。 たとえその画像がネット上ではGIFやJPGで保存されていても、です。 ですから一回、どこかにその画像をビットマップで保存してから、フォトショップの「開く」で開かなければならないので、面倒です。 以前はそんなことがなく、ただ画像をフォトショップやらに重ねるだけで よかったのに・・。 同じ画像でも、他の人のパソコンではOKです。 どこか設定を変えてしまったんでしょうか? 教えてください。待ってます。

  • アニメーションGIFで作れます?

    ホームページのロゴを作成しようと思っています。 作りたいロゴなんですが、 ・最初は文字が右から左に流れていくアニメーション ・すべての文字がそろったところで、一度文字を消す ・その後、徐々に画像が浮かび上がるようにする。 ・画像が完全に表示された時、画像の中にハイパーリンクを埋め込んで、それをクリックすると他のページに飛ぶ。 といった感じです。 前半はアニメーションgifという技術を使えばできると思いますし、後半はインターレースgifという技術でできると思いますが、 この2つって、同時に使うことはできるのでしょうか? それから、こういったものを作るばあい、どんなソフトやツールがあれば、可能でしょうか・・・。 gifじゃなくてFlashの方が楽でしょうか? よろしくお願いいたします。

  • gifアニメーションの作成

    gifのアニメーションを作りたいのですが、いいソフトはありませんか。具体的には画像を順番に表示するものです。元の画像はもう用意してあるので、それをつかうものでお願いします。

  • gifの透明の書き出し方?

    こんばんは。 今、フォトショップを使ってweb画像を作っています。 ただ、できた画像をGIFで保存してその画像を HPの素材として使おうとすると画像の背景が 透明化されていなく画像が浮いてみえて困っています。 フォトショップで背景を透明化する方法、 5.5では、 メインメニュー→ファイル→データ書き出し→Gif89a とやって出来たのですが、 現在の私のふだん使っている6.0ではGif89aという項目がありません。 イメージレディか、フォトショップ6.0での透明の指定の仕方、教えてください。 よろしくお願い致します。

  • mixiのプロフィール写真をアニメーションGIF風にしたい

    mixiのプロフィール写真は"JPEG"のみ許可されており、 "GIF"(当然、アニメーションGIFを含む)をアップしようとしても "画像はJPG形式にして下さい。"とエラーになります。 しかし、mixiのプロフィール写真をアニメーションGIF風にされている方を 見受けますが、どのようにされているのでしょうか?

専門家に質問してみよう