WEBサイトの画像の一部に動きをつける方法を教えてください。

質問

WEBサイトの画像の一部に動きをつける方法を教えてください。

http://www.pt-honpo.com/
上記サイトの「なんとポケットティッシュ１個あたり2.55円より」中、
「2.55円」の部分が一定時間で動作するようになっています。

ソースを見ると、jpgが配置してありhtmlを見る限りでは、
そのような動作を行うための記述は見つかりません。

外部CSSやjavascriptによる動作でしょうか？

出来るだけ具体的に教えて頂けると幸いです。
宜しくお願い致します。

回答No.3

noname#119957

＃２さんの解析のように、ＪＰＥＧを表示して、その上に、絶対配置で「動く透明ＧＩＦ画像」を配置する手法もいいですが、

大きい画像をスライスで分割して、動作させるエリアのＪＰＥＧをＣＳＳ指定で背景画像にして、その上に普通に相対配置で「動く透明ＧＩＦ画像」を配置しても同じような表示になりますよ。

回答No.2

MasakaMasaka

No.1さんが書かれた通り、
ソース84行目<h2><img src="shared/images/home/visual.jpg" alt="ポケットティッシュ無地印刷なし6Wの価格" width="555" height="239"></h2>
の上にアニメーションGIF「visual_anim.gif」を絶対配置で表示していますね。

ソース23行目<link href="shared/css/import.css" rel="stylesheet" type="text/css" media="all">
で読み込んだ「import.css」の中でインポートした「home.css」で、上記の定義をしています。

もう少し詳しく書きますと、
ソース--------------------------------
83行目<div id="visual">
84行目 <h2>・・・</h2>
85行目 <p class="price">・・・</p>
　　　　・・・
　　　　・・・
96行目</div>
--------------------------------------
に対して、
home.css------------------------------
#visual{ position: relative }
　　　　・・・
#visual .price{
position: absolute;　←親要素divを原点とした絶対位置(左上から下へ46px、右へ82pxの位置）に
top: 46px;
left: 82px;
　　　　・・・
background: url(../images/home/visual_anim.gif) no-repeat left top }
　　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　　　　　　　　背景としてvisual_anim.gifを表示。
--------------------------------------

分かりにくくてスミマセン。

回答No.1

noname#202167

FireFoxブラウザで見ると
http://www.pt-honpo.com/shared/images/home/visual_anim.gif
というアニメーションGIFが使われている事がわかりますよ。
FlashやJavaScriptでも可能な事ですが、これはGIFの様ですね。

ソースコード上にこのファイル指定がないので
インナーHtmlか何かを使ってページ単位で埋め込んでいるのかも
しれません。