LibGuides 使用說明: 影像地圖

圖的部份來自國立中興大學圖書館參考組陳蓉蓉館員所製作的圖書館活動草圖, 我們協助其用CMS製作一個活動網站, 根據其規劃, 首頁是一張大的圖像, 有三個項目讓讀者選擇, 傳統這是用影像地圖來處理, 但執行過程中發現, 如要適合不同的螢幕大小, 傳統的做法由於採絕對座標, 在圖形放大縮小時, 位置會跑掉.

用新的HTML語法, 為了多控制位置及未來要隱藏, 多設了<div>及<class>如下(上例)

<div id="map">
<div class="image"><img alt="left_or_right" src="https://libapps.s3.amazonaws.com/accounts/80522/images/homepage.JPG" usemap="#entrytmap" width="100%" />

<a href="http://www.nchu.edu.tw" style="top: 65%; left: 15%; width: 18%; height: 18%; "> </a>

<a href="https://sris-tw.libguides.com/c.php?g=837893" style="top:65%; left: 40%; width: 15%; height: 15%; background:#cccccc"> </a> <a href="https://sris-tw.libguides.com/c.php?g=837895" style="top:65%; left: 70%; width: 15%; height: 15%; background:#000000"> </a>

</div>
</div>

上述語法, 看您要放在那, 請把影像位置置換成您的圖像位置, 項目連結改成您規劃的連結點, 最後以左上為原點(0,0)往下算比例即可, 以第一個為例說明如下:

• top: XX% <-- 指由上往下, 多少比例處
• left: XX% <-- 指由左邊算來, 多少比例處
• width: XX%  <-- 指由要點選的區域寬度佔總圖形的多少比例
• height: XX% <-- 指由要點選的區域高度佔總圖形的多少比例
• backgroupd:#000000 <-- 指的是該區域刷上這個頻色(黑色), 如要透明的選擇區, 將這個拿掉即可.

同時要在同頁的CSS區補上以下語法:

<style>
   .image{
     position: relative;
   }
   .image a{
     display: block; 
     position: absolute;
   }
</style>

這樣就可以作用了.....我們留了兩個有色框給您練習(改成您自己要用的資訊).

前面提到的要在指南頁面中藏起來, 這個圖由於是放在Group的Banner, 指南的Banner會繼承Group的Banner, 所以我們透過之前class的設定來把它在指南隱藏起來, 為了避免大家把其它CSS弄亂造成災難, 我們還是把它做成獨立使用的用法, 請放在指南的 Guide Custom JS/CSS 區的最後一個</style>之後即可.

<style type="text/css">
#map{display:none}
</style>

本範例所用的圖像經陳蓉蓉小姐授權使用。

啊...在Libguides要如何使用呢?

如果您是LibGuides的使用單位, 請單位管理者把整個Guides複製回去,就可以從頭看到尾囉.....

別忘了,  要在您的LibGuides留下此圖為碩陽數位科技公司提供的 Credit 哦! <--只有這個小要求而已...