:::按縮圖看原圖-4:::

 類似這種圖片的語法,圖片所在的網頁空間最好是圖片開啟順暢的。
當整個表格置中時,在不同解析度的螢幕下大圖出現的位置會有所不同,解決的方式有:(1)表格靠網頁左邊。(2)使用無工具視窗(視窗-無工具視窗)。(3)使用IFRAME (視窗-網頁中的視窗-1)。

範例
﹝測試頁﹞

   
A.貼在 <head> 這裡 </head>

        
B.貼在 <body> 這裡 </body>

可更改的部份:

1. 這是大圖的相關設定,「...<div id="Layer1" style="position: absolute; left: 211; top: 39; width: 308; height: 255; z-index: 1; visibility: hidden">...」→ 每張圖的 Layer (圖層) 的數目要與語法C段相對應,「left: 211; top: 39」是大圖與視窗左邊與頂端的距離,就是滑鼠接觸小圖時,大圖出現在頁面的位置。

2. 這些圖在 FrontPage 頁面會呈現重疊現象,如果點取某個圖層,會出現八個點,當滑鼠出現十字時,按住滑鼠左鍵可以移動圖層至指定位置,但許多圖層疊在一個頁面時,最好在html中修改位置「left: 211; top: 39」,讓所有大圖出現的位置同在一個位置。
在 Dreamweaver 中,只要在功能表 → 視窗 → 圖層,就會打開圖層面板......

3. 每個大圖的語法如 →  <div id="Layer1" style="position:..........<img src="第一張大圖檔名路徑" ></td></tr></table></div> ,要增加圖片數目時,將整段複製往下貼上,"Layer1" 的編號依序編列,並與C段語法相對應。

      
C.貼在 <body> 指定位置 </body> 

 

可更改的部份:

1. 這一段是頁面表格與小圖的語法,表格細節可在頁面自行修改。

2. 小圖可另行製作大圖的縮小圖,或將大圖設定尺寸,如→...「<img src="第一張小圖檔名路徑" width="60" height="60"...」,大圖尺寸就會變成 60x60。

3. 在頁面上直接將帶著語法的圖片複製貼到另一個儲存格,也同樣會有語法效果,但要更改其中 Layer 的編號,並至B段語法中再作一段大圖的語法。

4. 每一段小圖的語法都有兩處 Layer 編號,要與B段大圖 Layer 編號相對應。

 --隨意玩網--語法練習--
△TOP