影像地圖一直就是前端工程師的夢魘,如果不借助視覺化的工具軟體、實在很難完成影像地圖。若是想要把影像地圖做成響應式的內容呢?呵呵、別傷腦筋了,求助於工具吧。這篇文章將要教你如何使用免費工具完成響應式的影像地圖。
製作影像地圖
雖然使用Dreamweaver可以很快製作出影像地圖、但一套Dreamweaver可不便宜,真的要為了這難得用到的功能砸錢去買一套嗎?其實網路上有很多免費的線上工具、可以幫助我們編輯影像地圖。這裡我們要介紹 Image Map Tool、跟大家分享如何使用image map tool 編輯影像地圖。
上傳圖片
- 進入image-maps網站後開始上傳圖片,也可以先將圖片上傳到伺服器之後再提供圖片的位址。
- 圖片上傳完成後、底下出現預覽圖、這時候點下 click to continue 進入編輯畫面。
- 進入編輯畫面後、右上角出現黃色底的提示文字。”在圖片上按右鍵開啟選單、如果是Mac電腦則使用 control + click 開啟選單”。
- 關閉提示文字之後、就可以開始編輯影像地圖。
畫矩形框
- 按下右鍵、當彈出選單之後選擇Create Rect。
- 調整矩形框的大小並將矩形框移動到想要的位置。
- 設定連結的相關資訊。
畫任意形狀
- 按下右鍵、當彈出選單之後選擇Create Poly。
- 延著圖形的外框點按滑鼠左鍵、將圖形圍繞起來。
- 設定連結的相關資訊。
畫圓形
- 按下右鍵、當彈出選單之後選擇Create Circle。
- 在圓心的位置按下滑鼠左鍵、產生圓心座標並儲存。
- 在圓週的任意點上按下滑鼠左鍵、產生圓半徑的數字之後儲存。此時已經畫好圓形框。
- 在畫好的圓形框上按滑鼠左鍵、叫出連結的設定視窗。設定連結的相關資訊。
預覽影像地圖
- 按下右鍵、當彈出選單之後選擇Get Code。
- 點選HTML OutPut、預覽影像地圖的結果。
取回影像地圖的代碼
- 點選HTML Code、將視窗滾到最底下。
- 複製HTML Image Map Code欄位中的程式碼。
- 將取回的程式碼貼在網頁的<body>之中。
響應式的影像地圖
製作好的影像地圖並不具有響應式的特性。當圖片隨著視窗改變大小時、具有連結作用的區塊並沒有跟著改變。
jQuery-rwdImageMaps
想要讓影像地圖具有響應式的效果、只要加上jQuery-rwdImageMaps就可以了。
首先到https://github.com/stowball/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>
這樣子我們就得到具有響應式效果的影像地圖了哦。
您好 我是個沒學過網頁設計的新手
照著步驟做到jQuery-rwdImageMaps那邊就不懂了
東西載了 不知道怎麼開
有把檔案拖進GOOGLE裡
出現一堆字碼 也不會應用
請問我如何應用到自己的影像地圖呢?
謝謝您
您的HTML檔應該長得像這樣:
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
請問這段要貼在哪裡呢?謝謝!!
如果您是寫在html檔裡,那就把
貼在
好文啊 学习了
您好,
剛剛照著做了
程式碼也放了
為什麼響應式的部分還是沒反應
麻煩請教 謝謝
要給我網頁的連結才能幫你看是什麼原因。
照著步驟下載了jQuery-rwdImageMaps
之後就看不懂如何操作了?
不知道從哪裡載入,怎麼載入?
要怎麼”設定所有使用到影像地圖的圖片都套用jQuery-rwdImageMaps”呢?
謝謝您
你好 請問上述的教學 須貼在哪一個編輯器比較合適 我使用了google site 但是載入的圖片並不會隨著是窗大小跟著改變
使用word press 但是載入 jQuery-rwdImageMaps 的指令word press不接受
儘量使用純文字編輯器,如果是wordpress 要切換到文字編輯模式。
您好不好意思,我是第一次製作網頁的新手,想請問為甚麼響應式效果一直做不出來呢?
我照著
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
網頁標題
//取回的影像地圖代碼
這個部分,將語法貼在css內
但響應式這個部分一直沒辦法成功
我是使用wordpress來製作的
這串是javascript,不能貼在css裡。
可以使用wordpress 的編輯器把底下這段貼進內容裡:
記得要確認網站有載入jquery哦。
您好不好意思,我是個新手,我使用wordpress依照您的步驟做下來,
但最後卻無法成功響應式
我將
$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});
網頁標題
//取回的影像地圖代碼
這段貼在html的語法框內
雖然有圖片但無法跟著視窗改變按鈕位置
想請教哪邊出了問題呢?
要確認jquery和jquery.rwdImageMaps.js都有載入到頁面裡面。
感謝分享!!
請慢用 ^^
您好,
依照教學做了,程式碼也放了
響應式的部分還是沒反應
可以指導一下嗎?
謝謝
要有連結給我才能幫你找原因哦。
謝謝,已成功,簡單又受用 😀
您好, 感謝您的分享, 目前單位使用的是市面上的Rpage, 很多都是固定寫入的css設定, 在網路上找到的使用image map應用popup以及這篇提到的響應式部分似乎都需要用到Java或是Jquery, 但因為伺服器端(?)不在單位這裡,無法確定是否有載入Jquery等其他模組, 能否請教較陽春型的html的視窗框架做比例設定的寫法呢?
可以把大圖切成幾塊小圖、然後在小圖上加連結
您好,參考您的網站,響應式影像地圖做成功了。
但我想要連結到同網頁的錨點,而不是跳到其他網頁。
請問 使用image-maps網站製作影像地圖時,Map URL要怎麼設定才能連到同網頁的錨點呢?
Map URL 填入:#錨點名稱
就可以了
您好~
謝謝您的分享
放在html有成功
但把usemap放在modal(開燈箱)裡面就不能用了
modal一打開coords”全歸零,變成coords=”0,0,0,0″
請問該如何設定才能讓影像地圖在燈箱裡也有作用呢?
謝謝
你的lightbox 可能要自己寫才行哦,
簡單的作法:自己手動刻好lightbox的layout, 然後使用show(), hide(),去控制你的lightbox
我的網頁的程式也需要請你看一下
$(document).ready(function (e) {
$(‘img[usemap]’).rwdImageMaps();
});
這樣子看不出問題哦