痞客旺旺 每天平凡中不平凡的事

嘿~各位大家好，今天旺旺不負責教學又要來出一張嘴了 。今天要上的課程是點小圖看大圖的語法運用，這種方法最常使在網路拍賣或是BLOG，有時網頁秀圖太多，網頁過長，容易讓使用者與觀看者手拉到抽筋的 境，這時候有了這個語法的運用就很方便了。

當滑鼠移到小圖時，立即在大圖上面可呈現原圖的大小,嘿~不錯吧!找尋了Google發現了jannwu 分享點小圖變大看(CSS＋js)不撐寬文字行 ，不過我要承認我是丫笨，作者寫的很仔細但我還是看不懂，只好威脅丫土再整理一份旺仔看的懂語法給我。

《

==================================================================================


<style>#c01 a:hover {border: 4px solid #cc9900}img{margin-right: 4px}</style>　　

<table border="0" width="550">
  <tr>
   <td height="550">
     <div align="center">
     <img height="500" src="照片的位址.jpg" width="500" border="2" id="c00" />   </div>
 　</td>
  </tr>

  <tr>
   <td id="c01" valign="top"><table width="200" border="1">

            　　<a href="#a00" onmouseover="document.images.c00.src='第一張照片的位址.jpg'" >
 　　　　　<img "照片名稱(可打中文)" src="第一張照片的位址.jpg" width="100" border="0" />
 　　　　　</a>
 　　　            
 　　　　　<a href="#a00" onmouseover="document.images.c00.src='第二張照片的位址.jpg'" >
 　　　　　<img "照片名稱(可打中文)" src="第二張照片的位址.jpg" width="100" border="0" />
 　　　　　</a>

          </td>
  </tr>
</table>


=============================================================================

語法修改成自己的後，在發表新文章裡頭把語法貼到→html編輯器裡頭後按更新即可 或是按一下切換編輯器 然後把語法貼入即可

ps:感謝丫土土的精簡語法分享
    照片示範檔來源:泰迪熊博物館