[貼圖][氣象][DIY]欄位加入多功能中央氣象局衛星雲圖動畫 @ Frank的雜記

200808270700[貼圖][氣象][DIY]欄位加入多功能中央氣象局衛星雲圖動畫

?部落格小玩意

部落格小玩意
效果
外掛
中央氣象局
多功能
貼圖
HiNet
衛星雲圖
蕃薯藤
部落格
動畫
DIY
動態
即時
GIF
天氣
氣象
欄位

簡介

今天心血來潮來寫篇自創的欄位加入中央氣象局衛星雲圖動畫

這欄位我用很久了!穩定性良好!且不用加入程式碼!自訂性高!方便容易!

廢話就不多說!現在就開始動手吧!!

-更新(2009/08/09)

HiNet 氣象-動態版

蕃薯藤天氣-動態版

中央氣象局-400大圖靜態版

中央氣象局-150小圖靜態 A 版

中央氣象局-150小圖靜態 B 版

開始

新增兩張 HiNet 氣象即時彩色衛星雲圖!!-更新(2009/8/9 - 下午 08:18)

HiNet 氣象-動態版

首先先利用HiNet 氣象的圖片

點擊選項中的衛星雲圖

圖片連結

並將選定的圖片複製網址即可貼於欄位使用了!

圖片尺寸為 GIF 180x180 像素

圖片連結 / satellite.gif (GIF 圖片，180x180 像素)

圖片連結 / as_run.gif (GIF 圖片，180x180 像素)

加入欄位

在此我提供加入的代碼寫法!

內容為:

1.常態圖片為東亞彩色衛星雲圖

2.滑鼠指標重疊圖片時為台灣彩色衛星雲圖

3.滑鼠指標離開圖片時為東亞彩色衛星雲圖

4.點擊圖片時為彈出中央氣象局衛星雲圖的頁面 800x500 視窗

代碼:
<center><a onclick="window.open('http://www.cwb.gov.tw/V6/observe/satellite/Sat_T.htm?type=RGB','',',top=100,left=100,width=800,height=490,resizable=yes,scrollbars=no')" href="javascript://"> <img border="0"src="http://weather.hinet.net/graph/as_run.gif" onmouseover="this.src='http://weather.hinet.net/graph/satellite.gif'"onmouseout="this.src='http://weather.hinet.net/graph/as_run.gif'"alt="點擊開啟中央氣象局-衛星雲圖" title="點擊開啟中央氣象局-衛星雲圖" /> <a href="http://blog.xuite.net/frank.hgs/GE/19020801">欄位加入衛星雲圖 by Frank的雜記</a></center>

友情提示:

可反覆測試依喜好修改或增減效果從簡潔到華麗功能直至滿意結果!

可能的話請保留代碼內本篇連結以便其他朋友查詢喔!

蕃薯藤天氣-動態版

由於 yam天空-天氣-動態衛星雲圖
可能因中央氣象局全球資訊網的衛星雲圖

變更圖片連結導致更新錯誤!!

Frank 於 yam天空 - 意見信箱反應未能成功!!

還請各位朋友幫忙反應!!-更新(2009/8/2 - 上午 08:03)

利用開啟特效視窗蕃薯藤天氣-動態衛星雲圖的圖片

從選項中的送出結果可顯示各項衛星雲圖

圖片連結

並將選定的圖片複製網址即可貼於欄位使用了!

圖片尺寸為 GIF 170x183 像素

圖片路徑規則

*若已選定好圖片可不必理會此圖片路徑規則說明!

我整理了一下圖片路徑規則方便各位修改路徑!

圖片路徑修改紅字部分如:

http://weather.news.yam.com/satellite/s3p6.gif

以下皆用此圖網址為範例!

地區

全球:

http://weather.news.yam.com/satellite/s0p6.gif

東亞:

http://weather.news.yam.com/satellite/s1p6.gif

臺灣:

http://weather.news.yam.com/satellite/s3p6.gif

(*可見光另外!)

色調

彩色圖片:

http://weather.news.yam.com/satellite/s3p6.gif

黑白圖片:

http://weather.news.yam.com/satellite/s3o6.gif

色彩強調:

http://weather.news.yam.com/satellite/s3q6.gif

*可見光:

http://weather.news.yam.com/satellite/sco6.gif(全球)

http://weather.news.yam.com/satellite/sao6.gif(東亞)

http://weather.news.yam.com/satellite/sbo6.gif(臺灣)

形式

副檔名前加"a"為靜態模式如:

動態模式:

http://weather.news.yam.com/satellite/s3p6.gif

靜態模式:

http://weather.news.yam.com/satellite/s3p6a.gif

(*動態模式每次只顯示3~4格動畫!並非顯示每小時/格!)

時間

3小時:

http://weather.news.yam.com/satellite/s3p3.gif

6小時:

http://weather.news.yam.com/satellite/s3p6.gif

9小時:

http://weather.news.yam.com/satellite/s3p9.gif

12小時:

http://weather.news.yam.com/satellite/s3p12.gif

範例

範例一

依圖片路徑規則可知此為臺灣彩色 3小時靜態的即時衛星雲圖

http://weather.news.yam.com/satellite/s3p3a.gif

範例二

依圖片路徑規則可知此為東亞可見光 9小時動態的即時衛星雲圖

http://weather.news.yam.com/satellite/sao9.gif

加入欄位

在此我提供加入的代碼寫法!

內容為:

1.常態圖片為全球6小時彩色衛星雲圖

2.滑鼠指標重疊圖片時為臺灣6小時彩色衛星雲圖

3.滑鼠指標離開圖片時為東亞6小時彩色衛星雲圖

4.點擊圖片時為彈出中央氣象局衛星雲圖的頁面 800x500 視窗

代碼:
<center><a onclick="window.open('http://www.cwb.gov.tw/V6/observe/satellite/Sat_T.htm?type=RGB','',',top=100,left=100,width=800,height=490,resizable=yes,scrollbars=no')" href="javascript://"> <img border="0" src="http://weather.news.yam.com/satellite/s0p6.gif" onmouseover="this.src='http://weather.news.yam.com/satellite/s3p6.gif'" onmouseout="this.src='http://weather.news.yam.com/satellite/s1p6.gif'" alt="點擊開啟中央氣象局-衛星雲圖" title="點擊開啟中央氣象局-衛星雲圖" /> <a href="http://blog.xuite.net/frank.hgs/GE/19020801">欄位加入衛星雲圖 by Frank的雜記</a></center>

友情提示:

可反覆測試依喜好修改或增減效果從簡潔到華麗功能直至滿意結果!

可能的話請保留代碼內本篇連結以便其他朋友查詢喔!

新增三張中央氣象局即時天氣圖!!-更新(2009/6/26 - 下午 07:08)

中央氣象局-400大圖靜態版

圖片連結 / s1p.jpg (JPEG 圖片，400x430 像素)

圖片連結 / s3p.jpg (JPEG 圖片，400x430 像素)

圖片連結 / hk.jpg (JPEG 圖片，400x400 像素)

圖片來源:

中央氣象局全球資訊網

內容為:

1.常態圖片為累積雨量圖

2.滑鼠指標重疊圖片時為台灣彩色衛星雲圖

3.滑鼠指標離開圖片時為東亞彩色衛星雲圖

4.點擊圖片時為彈出中央氣象局衛星雲圖的頁面 800x500 視窗

代碼:
<center><a onclick="window.open('http://www.cwb.gov.tw/V6/observe/satellite/Sat_T.htm?type=RGB','',',top=100,left=100,width=800,height=490,resizable=yes,scrollbars=no')" href="javascript://"> <img border="0"width="200" src="http://www.cwb.gov.tw/V6/observe/rainfall/Data/hk.jpg" onmouseover="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s3p/s3p.jpg'"width="200" onmouseout="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s1p/s1p.jpg'"width="200" alt="點擊開啟中央氣象局-衛星雲圖" title="點擊開啟中央氣象局-衛星雲圖" /> <a href="http://blog.xuite.net/frank.hgs/GE/19020801">欄位加入衛星雲圖 by Frank的雜記</a></center>

友情提示:

可反覆測試依喜好修改或增減效果從簡潔到華麗功能直至滿意結果!

可能的話請保留代碼內本篇連結以便其他朋友查詢喔!

新增三張中央氣象局即時天氣圖 150 小圖版 !!-更新(2009/6/28 - 下午 08:56)

中央氣象局-150小圖靜態版

圖片連結 / s1p150.jpg (JPEG 圖片，139x149 像素)

圖片連結 / s3p150.jpg (JPEG 圖片，139x149 像素)

圖片連結 / hk150.jpg (JPEG 圖片，150x150 像素)

圖片來源:

中央氣象局全球資訊網

中央氣象局-150小圖靜態 A 版

內容為:

1.常態圖片為累積雨量圖

2.滑鼠指標重疊圖片時為台灣彩色衛星雲圖

3.滑鼠指標離開圖片時為東亞彩色衛星雲圖

4.點擊圖片時為彈出中央氣象局衛星雲圖的頁面 800x500 視窗

代碼:
<center><a onclick="window.open('http://www.cwb.gov.tw/V6/observe/satellite/Sat_T.htm?type=RGB','',',top=100,left=100,width=800,height=490,resizable=yes,scrollbars=no')" href="javascript://"> <img border="0"src="http://www.cwb.gov.tw/V6/observe/rainfall/Data/hk150.jpg" onmouseover="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s3p/s3p150.jpg'"onmouseout="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s1p/s1p150.jpg'"alt="點擊開啟中央氣象局-衛星雲圖" title="點擊開啟中央氣象局-衛星雲圖" /> <a href="http://blog.xuite.net/frank.hgs/GE/19020801">欄位加入衛星雲圖 by Frank的雜記</a></center>

中央氣象局-150小圖靜態 B 版

內容為:

1.常態圖片為東亞彩色衛星雲圖

2.滑鼠指標重疊圖片時為台灣彩色衛星雲圖

3.滑鼠指標離開圖片時為東亞彩色衛星雲圖

4.點擊圖片時為彈出中央氣象局衛星雲圖的頁面 800x500 視窗

代碼:
<center><a onclick="window.open('http://www.cwb.gov.tw/V6/observe/satellite/Sat_T.htm?type=RGB','',',top=100,left=100,width=800,height=490,resizable=yes,scrollbars=no')" href="javascript://"> <img border="0"src="http://www.cwb.gov.tw/V6/observe/satellite/Data/s1p/s1p150.jpg" onmouseover="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s3p/s3p150.jpg'"onmouseout="this.src='http://www.cwb.gov.tw/V6/observe/satellite/Data/s1p/s1p150.jpg'"alt="點擊開啟中央氣象局-衛星雲圖" title="點擊開啟中央氣象局-衛星雲圖" /> <a href="http://blog.xuite.net/frank.hgs/GE/19020801">欄位加入衛星雲圖 by Frank的雜記</a></center>

友情提示:

可反覆測試依喜好修改或增減效果從簡潔到華麗功能直至滿意結果!

可能的話請保留代碼內本篇連結以便其他朋友查詢喔!

Google Earth+欄位:
[氣象][下載]中央氣象局 - 衛星雲圖 -自動更新

Google Earth:
[原創][氣象][下載]嵌入式衛星雲圖12監控視窗

欄位:
[氣象]欄位嵌入即時衛星雲圖(每小時更新一次)+動態外掛

欄位:
如何在網誌內放入即時衛星雲圖