OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

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

  • すぐに回答を!
  • 質問No.117017
  • 閲覧数658
  • ありがとう数4
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 100% (12/12)

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

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

  • 回答No.2
レベル11

ベストアンサー率 53% (199/370)

一般的に、ダイナミックHTMLのレイヤー機能を用いるかとおもいます。
これは、JPEGの上に載せたいGIFの大きさのレイヤーを作って、その上にGIF画像をのせ、それをHTML上で置きたい場所に座標指定して表示します。
ただ、IEとNN両方で通用するソースを書くのはちょっと長くなりますし、ページ制作ソフトを使っているとのことなので、直接のソース編集はやっていないと思います。
ページミル3.0が、ダイナミックHTMLのレイヤーに対応しているならばその機能を探し出して使ってください。(DreamWaverなどが比較的こういった要素得意だったと思うのですが、ページミル3.0は一度も触ったことがないので分かりません・・・)

また、その地図がGIFでも問題ないのならば、PhotoShopで全体をアニメーションGIFで作ってしまうというのも一つの手だとお思います。ImageReadyを使えば、画像のほんの一部分(要するにボールの範囲)だけをアニメーション化することもできると思いますので、アニメーションGIFにしたからと言ってそれほどファイルサイズが大きくはならないと思います。
お礼コメント
singlemalt

お礼率 100% (12/12)

早速のアドバイスをありがとうございます。
そうですね、ImageReadyを使えばうまくいくかもしれませんね。
早速試してみます。どうもありがとうございました。
投稿日時 - 2001-08-11 16:19:46
-PR-
-PR-

その他の回答 (全2件)

  • 回答No.1
レベル14

ベストアンサー率 49% (1127/2292)

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

■■■■
■■■■
■■■■

のように分割します。
そしてそれらをテーブルに組み、各セルの背景(BACKGROUND)として表示させます。
さらに各セルにIMGタグでアニメーションGIFを重ねればOKです。
お礼コメント
singlemalt

お礼率 100% (12/12)

早速のアドバイスをありがとうございます。
なんとなく私でもできそうな感じなので試してみます。
どうもありがとうございました。
投稿日時 - 2001-08-11 16:17:41

  • 回答No.3
レベル13

ベストアンサー率 46% (643/1383)

スタイルシートを使えばいいかも。 以下のような感じでHTMLを書いてみてください。 下記のHTMLをそのまんまコピー&ペーストして、ファイル名だけ変えたら、多分、正 常に動きます。 背景を(50,50)の座標(単位:ピクセル)に表示し、アニメーションGIFを(75,55)の座標 に表示します。 IE4.0以降、Netscape4.0以降で表示可能なはずです。 ****ココ ...続きを読む
スタイルシートを使えばいいかも。

以下のような感じで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

お礼率 100% (12/12)

早速のご回答ありがとうございます。
本来ならソースをきちんと理解してやるべきなのでしょうが、私はまだ理解不足で作成ソフトでやっています。
まず先にアドバイス頂きました方法でやってみて、うまくいかなかったら挑戦してみます。
ご丁寧にどうもありがとうございました。
投稿日時 - 2001-08-11 16:23:28
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
このQ&Aにこう思った!同じようなことあった!感想や体験を書こう
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ