簡單究好 Simple is Best

網頁前端開發資訊

如何製作響應式的影像地圖

7 月 19, 2015 Posted by Ellen 未分類 29 comments

影像地圖一直就是前端工程師的夢魘，如果不借助視覺化的工具軟體、實在很難完成影像地圖。若是想要把影像地圖做成響應式的內容呢？呵呵、別傷腦筋了，求助於工具吧。這篇文章將要教你如何使用免費工具完成響應式的影像地圖。

製作影像地圖

雖然使用Dreamweaver可以很快製作出影像地圖、但一套Dreamweaver可不便宜，真的要為了這難得用到的功能砸錢去買一套嗎？其實網路上有很多免費的線上工具、可以幫助我們編輯影像地圖。這裡我們要介紹 Image Map Tool、跟大家分享如何使用image map tool 編輯影像地圖。

上傳圖片

  1. 進入image-maps網站後開始上傳圖片，也可以先將圖片上傳到伺服器之後再提供圖片的位址。
  2. 圖片上傳完成後、底下出現預覽圖、這時候點下 click to continue 進入編輯畫面。
  3. 進入編輯畫面後、右上角出現黃色底的提示文字。”在圖片上按右鍵開啟選單、如果是Mac電腦則使用 control + click 開啟選單”。
  4. 關閉提示文字之後、就可以開始編輯影像地圖。

上傳圖片

畫矩形框

  1. 按下右鍵、當彈出選單之後選擇Create Rect。
  2. 調整矩形框的大小並將矩形框移動到想要的位置。
  3. 設定連結的相關資訊。

畫矩形框

畫任意形狀

  1. 按下右鍵、當彈出選單之後選擇Create Poly。
  2. 延著圖形的外框點按滑鼠左鍵、將圖形圍繞起來。
  3. 設定連結的相關資訊。

畫任意形狀

畫圓形

  1. 按下右鍵、當彈出選單之後選擇Create Circle。
  2. 在圓心的位置按下滑鼠左鍵、產生圓心座標並儲存。
  3. 在圓週的任意點上按下滑鼠左鍵、產生圓半徑的數字之後儲存。此時已經畫好圓形框。
  4. 在畫好的圓形框上按滑鼠左鍵、叫出連結的設定視窗。設定連結的相關資訊。

畫圓形

預覽影像地圖

  1. 按下右鍵、當彈出選單之後選擇Get Code。
  2. 點選HTML OutPut、預覽影像地圖的結果。

預覽影像地圖

取回影像地圖的代碼

  1. 點選HTML Code、將視窗滾到最底下。
  2. 複製HTML Image Map Code欄位中的程式碼。
  3. 將取回的程式碼貼在網頁的<body>之中。

取回影像地圖的代碼

響應式的影像地圖

製作好的影像地圖並不具有響應式的特性。當圖片隨著視窗改變大小時、具有連結作用的區塊並沒有跟著改變。

製作好的影像地圖並不具有響應式的特性

jQuery-rwdImageMaps

想要讓影像地圖具有響應式的效果、只要加上jQuery-rwdImageMaps就可以了。

首先到https://github.com/stowball/jQuery-rwdImageMaps去下載jQuery-rwdImageMaps。

jQuery-rwdImageMaps

將下載回來的zip檔解壓縮、會得到jquery.rwdImageMaps.js及jquery.rwdImageMaps.min.js二支js。這二支js我們只要選擇一支使用就可以了。

接著我們來調整影像地圖的HTML。

載入jQuery及剛下載回來的jQuery-rwdImageMaps。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.js"></script>

設定所有使用到影像地圖的圖片都套用jQuery-rwdImageMaps。

<script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>

這樣子我們就得到具有響應式效果的影像地圖了哦。

具有響應式效果的影像地圖

29 Comments

  • 回覆 LEE |

    您好 我是個沒學過網頁設計的新手
    照著步驟做到jQuery-rwdImageMaps那邊就不懂了
    東西載了 不知道怎麼開
    有把檔案拖進GOOGLE裡
    出現一堆字碼 也不會應用
    請問我如何應用到自己的影像地圖呢？
    謝謝您

    • 回覆 Ellen |

      您的HTML檔應該長得像這樣：

      <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.js"></script>
<script> 
$(document).ready(function(e) { 
$('img[usemap]').rwdImageMaps(); 
});
</script>
<title>網頁標題</title>
</head>
<body> //取回的影像地圖代碼</body>
</html>
  • 回覆 lisa |

    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

    請問這段要貼在哪裡呢?謝謝!!

    • 回覆 Ellen |

      如果您是寫在html檔裡，那就把

      <script>
       $(document).ready(function(e) {
       $('img[usemap]').rwdImageMaps();
       });
      </script>

      貼在

      <script src="jquery.rwdImageMaps.js"></script> 底下就可以了。
  • 回覆 ryan |

    您好，
    剛剛照著做了
    程式碼也放了
    為什麼響應式的部分還是沒反應
    麻煩請教 謝謝

  • 回覆 Jaimee |

    照著步驟下載了jQuery-rwdImageMaps
    之後就看不懂如何操作了?
    不知道從哪裡載入，怎麼載入?
    要怎麼”設定所有使用到影像地圖的圖片都套用jQuery-rwdImageMaps”呢?

    謝謝您

    • 回覆 Ellen | 
      <script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>
  • 回覆 WunShuai |

    你好 請問上述的教學 須貼在哪一個編輯器比較合適 我使用了google site 但是載入的圖片並不會隨著是窗大小跟著改變
    使用word press 但是載入 jQuery-rwdImageMaps 的指令word press不接受

    • 回覆 Ellen |

      儘量使用純文字編輯器，如果是wordpress 要切換到文字編輯模式。

  • 回覆 andy |

    您好不好意思，我是第一次製作網頁的新手，想請問為甚麼響應式效果一直做不出來呢?
    我照著

    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

    網頁標題

    //取回的影像地圖代碼

    這個部分，將語法貼在css內
    但響應式這個部分一直沒辦法成功
    我是使用wordpress來製作的

    • 回覆 Ellen | 
      
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });

      這串是javascript，不能貼在css裡。
      可以使用wordpress 的編輯器把底下這段貼進內容裡：

      <script src="jquery.rwdImageMaps.js"></script>
<script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>
//取回的影像地圖代碼放這裡

      記得要確認網站有載入jquery哦。

  • 回覆 andy |

    您好不好意思，我是個新手，我使用wordpress依照您的步驟做下來，
    但最後卻無法成功響應式
    我將

    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

    網頁標題

    //取回的影像地圖代碼

    這段貼在html的語法框內
    雖然有圖片但無法跟著視窗改變按鈕位置
    想請教哪邊出了問題呢?

    • 回覆 Ellen |

      要確認jquery和jquery.rwdImageMaps.js都有載入到頁面裡面。

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.js"></script>
<script>
    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
    });
</script>
  • 回覆 牛哥 |

    您好，
    依照教學做了，程式碼也放了
    響應式的部分還是沒反應
    可以指導一下嗎？

    謝謝

  • 回覆 我是不專精的Ellen |

    您好, 感謝您的分享, 目前單位使用的是市面上的Rpage, 很多都是固定寫入的css設定, 在網路上找到的使用image map應用popup以及這篇提到的響應式部分似乎都需要用到Java或是Jquery, 但因為伺服器端(?)不在單位這裡,無法確定是否有載入Jquery等其他模組, 能否請教較陽春型的html的視窗框架做比例設定的寫法呢?

  • 回覆 Ms.Lin |

    您好，參考您的網站，響應式影像地圖做成功了。

    但我想要連結到同網頁的錨點，而不是跳到其他網頁。

    請問 使用image-maps網站製作影像地圖時，Map URL要怎麼設定才能連到同網頁的錨點呢?

  • 回覆 MAOMAO |

    您好~

    謝謝您的分享
    放在html有成功
    但把usemap放在modal（開燈箱）裡面就不能用了
    modal一打開coords”全歸零，變成coords=”0,0,0,0″
    請問該如何設定才能讓影像地圖在燈箱裡也有作用呢？

    謝謝

    • 回覆 Ellen |

      你的lightbox 可能要自己寫才行哦，
      簡單的作法：自己手動刻好lightbox的layout, 然後使用show(), hide(),去控制你的lightbox

  • 回覆 Kan Chen NPUST |

    我的網頁的程式也需要請你看一下

    $(document).ready(function (e) {
    $(‘img[usemap]’).rwdImageMaps();
    });

Post a comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *