- ベストアンサー
画像にアニメーションＧＩＦを重ねたい・・・
ホームページ上の画像（jpg）にＧＩＦアニメーションを重ねたいのですが、どのようにしたらよいのでしょうか。 具体的には、地図の画像があり、その上に場所を示すため、点滅するボールのＧＩＦアニメーションを載せたいのです。 使用しているものは、ウインドウズ、ページミル3.0、フォトショップ5.5です。 素材サイトからボールのアニメーションはダウンロードしたのですが、どうにもうまく行きません。 どうぞよろしくお願い致します。
- singlemalt
- お礼率100% (12/12)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
一般的に、ダイナミックＨＴＭＬのレイヤー機能を用いるかとおもいます。 これは、ＪＰＥＧの上に載せたいGIFの大きさのレイヤーを作って、その上にGIF画像をのせ、それをＨＴＭＬ上で置きたい場所に座標指定して表示します。 ただ、IEとNN両方で通用するソースを書くのはちょっと長くなりますし、ページ制作ソフトを使っているとのことなので、直接のソース編集はやっていないと思います。 ページミル3.0が、ダイナミックＨＴＭＬのレイヤーに対応しているならばその機能を探し出して使ってください。（DreamWaverなどが比較的こういった要素得意だったと思うのですが、ページミル3.0は一度も触ったことがないので分かりません・・・） また、その地図がGIFでも問題ないのならば、PhotoShopで全体をアニメーションGIFで作ってしまうというのも一つの手だとお思います。ImageReadyを使えば、画像のほんの一部分（要するにボールの範囲）だけをアニメーション化することもできると思いますので、アニメーションＧＩＦにしたからと言ってそれほどファイルサイズが大きくはならないと思います。
その他の回答 (2)
- ARC
- ベストアンサー率46% (643/1383)
スタイルシートを使えばいいかも。 以下のような感じで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>
お礼
早速のご回答ありがとうございます。 本来ならソースをきちんと理解してやるべきなのでしょうが、私はまだ理解不足で作成ソフトでやっています。 まず先にアドバイス頂きました方法でやってみて、うまくいかなかったら挑戦してみます。 ご丁寧にどうもありがとうございました。
- sesame
- ベストアンサー率49% (1127/2292)
地図の画像を、指し示したい地点の数だけ ■■■■ ■■■■ ■■■■ のように分割します。 そしてそれらをテーブルに組み、各セルの背景(BACKGROUND)として表示させます。 さらに各セルにIMGタグでアニメーションGIFを重ねればOKです。
お礼
早速のアドバイスをありがとうございます。 なんとなく私でもできそうな感じなので試してみます。 どうもありがとうございました。
お礼
早速のアドバイスをありがとうございます。 そうですね、ImageReadyを使えばうまくいくかもしれませんね。 早速試してみます。どうもありがとうございました。