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

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

泰迪熊01 泰迪熊02 泰迪熊03 泰迪熊04 泰迪熊05 泰迪熊06

語法精簡後的分享》
===============================================================================================================


<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="片的位址" 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:感謝丫土土的精簡語法分享

atsww 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • Jump
  • 感恩 !
  • 哈囉
  • 我想請問為什麼我沒辦法讓滑鼠移動過去就變大圖啊@@