史萊姆論壇 - HTML 當onmouseover可否一次換出4張圖

史萊姆論壇 (http://forum.slime.com.tw/)

- 程式語言討論區 (http://forum.slime.com.tw/f76.html)

- - HTML 當onmouseover可否一次換出4張圖 (http://forum.slime.com.tw/thread235994.html)

HTML 當onmouseover可否一次換出4張圖

在http://www.cnyes.com/ 網頁中下方有一表格
亞
歐
美
期指
油
農
-----
當滑鼠停在某一 .GIF上時右側會換圖3或4張
我只要一個網頁就單純的只顯示出此表格功能 (~不要整個網址http://www.cnyes.com/ )

我爬文找了一段圖檔換圖法 , 但是只能換一張圖.
請問那位大大&仁兄&網友可否改成一次換出4張圖 ....(ECHO)
或用其他的方式寫.HTM 可以達到相同功能.
多謝指點~
----------------------------
圖檔換圖法 ── 行內 js 寫法

選項一

選項二

選項三

<IMG SRC="載入圖檔" width="70" BORDER="0" NAME="c0">
<A HREF="#"
onmouseover="document.images.c0.src='選項一圖檔'"
onmouseout="document.images.c0.src='載入圖檔'">選項一</A>
<A HREF="#"
onmouseover="document.images.c0.src='選項二圖檔'"
onmouseout="document.images.c0.src='載入圖檔'">選項二</A>
<A HREF="#"
onmouseover="document.images.c0.src='選項三圖檔'"
onmouseout="document.images.c0.src='載入圖檔'

請自備下列圖檔
a1.jpg, a2.jpg, a3.jpg, a4.jpg
b1.jpg, b2.jpg, b3.jpg, b4.jpg
c1.jpg, c2.jpg, c3.jpg, c4.jpg
d1.jpg, d2.jpg, d3.jpg, d4.jpg
e1.jpg, e2.jpg, e3.jpg, e4.jpg

語法:



<html>



<head>

<meta http-equiv="Content-Language" content="zh-tw">

<meta http-equiv="Content-Type" content="text/html; charset=big5">

<title>01</title>



<script>

        function ChangeImg(imgPath1, imgPath2, imgPath3, imgPath4) //更換圖檔

        {

                document.getElementById("Img1").src = imgPath1; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖

                document.getElementById("Img2").src = imgPath2; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖

                document.getElementById("Img3").src = imgPath3; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖

                document.getElementById("Img4").src = imgPath4; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖

        }

</script>

</head>



<body>



<table border="1" id="table1">

        <tr>

                <td><div onmouseover="ChangeImg('a1.jpg','a2.jpg','a3.jpg','a4.jpg')">01</div></td>

                <td rowspan="5"><img id="Img1" width="150" height="150" border="0"></td>

                <td rowspan="5"><img id="Img2" width="150" height="150" border="0"></td>

                <td rowspan="5"><img id="Img3" width="150" height="150" border="0"></td>

                <td rowspan="5"><img id="Img4" width="150" height="150" border="0"></td>

        </tr>

        <tr>

                <td><div onmouseover="ChangeImg('b1.jpg','b2.jpg','b3.jpg','b4.jpg')">02</div></td>

        </tr>

        <tr>

                <td><div onmouseover="ChangeImg('c1.jpg','c2.jpg','c3.jpg','c4.jpg')">03</div></td>

        </tr>

        <tr>

                <td><div onmouseover="ChangeImg('d1.jpg','d2.jpg','d3.jpg','d4.jpg')">04</div></td>

        </tr>

        <tr>

                <td><div onmouseover="ChangeImg('e1.jpg','e2.jpg','e3.jpg','e4.jpg')">05</div></td>

        </tr>

</table>



</body>



</html>

引用:

作者: cwvdavid (文章 2031070)

請自備下列圖檔
a1.jpg, a2.jpg, a3.jpg, a4.jpg
b1.jpg, b2.jpg, b3.jpg, b4.jpg
c1.jpg, c2.jpg, c3.jpg, c4.jpg
d1.jpg, d2.jpg, d3.jpg, d4.jpg
e1.jpg, e2.jpg, e3.jpg, e4.jpg

好厲害歐 ~ 我以前就在猜你可能是專門設計這方面的人材...ECHO
~ 多謝指點

我剛剛實際套用時, 你的方式是沒問題的, 但我若指定原來的鉅亨網的圖時發現另一個新的問題
之前我查出的.JPG 如下

'日經225 H TTP://www.cnyes.com/intraday/am/JP_NIKI_9704.PNG?1221213217187
'南韓綜合 H TTP://www.cnyes.com/intraday/am/KR_KSPI_9704.PNG?1221213217187
'香港恆生 H TTP://www.cnyes.com/intraday/am/HK_HSI_9704.PNG?1221213291875
'中國上證 H TTP://www.cnyes.com/intraday/am/cn_shi_9704.PNG?1221213338031

也就是說現在我發現圖檔名變了
日經225 http://www.cnyes.com/intraday/am/JP_NIKI_9765.PNG
也就是說上次都是 ..._9704.PNG 現在都變成 ..._9765.PNG
如此一來檔名會經常變 ,那末 .HTML 若是寫成固定的檔名 ~就破功了(無法顯示正確的.PNG)

看來鉅亨網是故意換檔名~ 不知大大有解決的良策? 那些.PNG 檔名好像不規律
我只要那個表 .PNG檔名的問題好像比較嚴重 :on_04:

動態產生的圖檔, 檔名本來就不會固定
(固定檔名反而會造成瀏覽器暫存, 看不到最新結果)

我在設計時, 也一定是產生不同檔名(以日期時間做為輸出檔名, 以便讓user每次都看到不同的圖片)
然後定時清舊過期的圖檔(避免硬碟容量一直被吃掉)

你要直接抓對方的圖, 一定是沒辦法的

引用:

作者: cwvdavid (文章 2031323)

那麼請問在http://www.cnyes.com/ 網頁檢視-->原始檔很長　，可否看一下它是以何方式來產生...97XX.PNG 呢?？？ (97是民國 , 但是XX算法是從何而來我猜不出)
謝謝~

畫面最上面有個key
// for CHART
var key="_9765";

中間的部份有

語法:

function SwapPNG(iIndex)

{

  

  var objIMG = new Array(4);

  var imgSrc = new Array("",

                         "http://www.cnyes.com/intraday/am/JP_NIKI" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/KR_KSPI" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/HK_HSI" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/cn_shi" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/GB_FTSE" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/DE_DAXX" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/FR_CAC" + key + ".PNG",

                         "http://www.cnyes.com/images/home150_130.gif",

                         "http://www.cnyes.com/intraday/am/US_DJI" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_COMP" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_SPX" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_SOX" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_SP1" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_ND1" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_ZD1" + key + ".PNG",

                         "http://www.cnyes.com/images/home150_130.gif",

                         "http://www.cnyes.com/intraday/am/US_DCL1" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_GC1" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_HG1" + key + ".PNG",

                         "http://www.cnyes.com/images/home150_130.gif",

                         "http://www.cnyes.com/intraday/am/US_SOY" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_CORN" + key + ".PNG",

                         "http://www.cnyes.com/intraday/am/US_WHEAT" + key + ".PNG",

                        "http://www.cnyes.com/images/home150_130.gif");

沒意外的話是定時變更 key值
你試試看