iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列 第 14

[Day14]HTML-影像地圖(上)

  • 分享至 

  • xImage
  •  

我的主題是捷運美食介紹網頁,如果只用文字條列就太枯燥了,首頁當然要比較酷一點,必須有捷運地圖當索引才行,所以今天就來介紹如何產生影像地圖!


介紹

影像地圖是一種讓網頁圖片能劃分出不同區塊,並將每個區塊做成超連結的網頁設計技巧。

範例網站

從上面的範例中,我們可以看到一張地圖裡有許多店名,而那些店名都已做成超連結,方便讓網頁瀏覽者可以直接跳轉到介紹網頁。

需要的元素及屬性

  1. <img>元素
    • 用來插入背景圖片、設定圖片寬高和連接影像地圖。
      屬性:srcwidthheightusemap
  2. <map>元素
    • 影像地圖本體,設定各區塊並連接其他網頁。
      屬性:name
  3. <area>元素
    • <map>中的區塊,設定區塊形狀、座標及網頁位址。
      屬性:shapecoordshref

今天先簡略介紹到這邊,明天會再更詳細介紹。我是YQ,明天見。


上一篇
[Day13]HTML-超連結
下一篇
[Day15]HTML-影像地圖(下)
系列文
從零寫出捷運美食介紹網頁(HTML/CSS)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言