黃昏的甘蔗

  如果只有圖而不是元件，需要在一張圖中給予多個連結區塊，我們可能會用 html map 來做，但他有個缺點就是當瀏覽器顯示的大小改變時，採用絕對位置的區塊就會造成連結錯誤，這篇就是要講如何以 CSS 方式，讓圖片的連結區塊跟著比例調整。

 HTML map 的用法
<img src="20170109_A02.jpg" width="100%" alt="left_or_right" usemap="#entrytmap">
<map name="entrytmap">
   <area shape="rect" coords="50,0,550,300" href="link1.htm" alt="left">
   <area shape="rect" coords="650,0,1100,300" href="link2.htm" alt="right">
</map>

缺點是：

----改用CSS方式-----------------------------

<style>
   .image{
     position: relative;
   }
   .image a{
     display: block;
     position: absolute;
   }
</style>
<div class="image" >
  <img src="20170109_A02.jpg" width="100%" alt="left_or_right" usemap="#entrytmap">
  <a href="http://udn.com" style="top: 55%; left: 1%; width: 45%; height: 45%;">
  <a href="http://www.google.com.tw/" style="top: 55%; left: 50%; width: 45%; height: 45%;">
</div>

這樣子~使用比例 percentage 的表示方式，就可以跟著瀏覽器的顯示大小跟著做調整了

~End