生活稿什麼
  • 中華職棒
    • 中華職棒官方
    • 樂天桃猿
    • 中信兄弟
    • 富邦悍將
    • 統一獅
    • 味全龍
  • 網路電視
    • 棒球baseball
    • 籃球basketball
    • 賽車Racing
    • 網球tennis
    • 足球football
    • 電子競技Gaming
  • 吃喝玩樂
    • 美食
    • 開箱評測
    • 棒球
    • 運動健身
  • 電腦手機軟體
    • 免費軟體
      • Google Chrome
    • 社群軟體
      • LINE
      • Facebook
      • Instagram
    • WordPress
    • 電腦維修
    • 程式語言
  • 動漫電玩
    • 模型玩具
    • 手機遊戲
    • 日本動漫
No Result
View All Result
生活稿什麼
No Result
View All Result

HTML Image Map在一張圖片上建立多個超連結

本篇文章小編要介紹如何使用 HTML Image Map在一張圖片上建立多個超連結 ,舉個例子來說如果一張世界地圖可以將它劃分成多個區域分別建立超連結,當網友點擊某個國家後,就可以將其導向那個國家的介紹文章,這種網頁技巧在製作網頁時常會被使用到,目前大多數人使用的瀏覽器Chrome、Firefox、safari…等也皆可以使用此功能,已經算是一種技術相當成熟的功能了,以下小編將針對Image Map的各種用法分別介紹給各位。

 

  HTML Image Map在一張圖片上建立多個超連結教學

影像地圖語法規則主要分為兩部份:
1.圖片的設定:

<img src="圖片網址" width="圖片的寬度" height="圖片的高度" usemap="#影像地圖名稱">

2.圖片區域以及超連結設定:

<map name="影像地圖名稱">
 <area shape="超連結區域的形狀" coords="圖形座標" href="超連結">
</map>

完整程式碼請參考:

<img src="圖片網址" width="圖片的寬度" height="圖片的高度" usemap="#影像地圖名稱">
<map name="影像地圖名稱">
 <area shape="超連結區域的形狀" coords="圖形座標" href="超連結">
</map>

 

影像地圖區域形狀設定:

1.方型

方型則是使用如下圖將(X1,Y1)與(X2,Y2)座標所連接而成的方型範圍即是超連結的範圍。

<area shape="rect" coords="X1,Y1,X2,Y2" href="超連結">

HTML Image Map在一張圖片上建立多個超連結

2.圓形

圓形則是使用圓心座標與半徑所畫出的圓即為超連結的範圍。

<area shape="circle" coords="圓心X,圓心Y,半徑" href="超連結">

HTML Image Map在一張圖片上建立多個超連結

3.不規則形狀

不規則形狀可設定多個點位,但需填寫X1與Y1坐標,再填寫X2,Y2坐標…依序填寫下去,各個點位所連結而成的範圍即為超連結的範圍。

<area shape="polygon" coords="座標X1,座標Y1,座標X2,座標Y2..." href="超連結">

HTML Image Map在一張圖片上建立多個超連結

 

延伸閱讀:

使用收尋引擎工具,讓網站更快速提升人氣與瀏覽量

Html5響應式在不同裝置載入不同解析度圖片

Google雲端硬碟架設HTML網頁空間 | 網站架設

如何在GoDaddy購買網址與註冊網域

網頁嵌入Youtube影片

Tags: HTMLhtml imageHTML imgHTML mapHTML 圖HTML教學HTML語法HTML超連結圖片超連結超連結 html超連結語法
小馬

小馬

在體育圈工作,喜歡旅遊、吃美食、分享生活。除此之外,也略懂程式設計與SEO,介於行銷人與工程師之間,目標是希望能夠整合這兩個不同的領域,分享更多有價值的資訊給更多人! 聯繫請洽:[email protected]

  • 中華職棒
    • 中華職棒官方
    • 樂天桃猿
    • 中信兄弟
    • 富邦悍將
    • 統一獅
    • 味全龍
  • 網路電視
    • 棒球baseball
    • 籃球basketball
    • 賽車Racing
    • 網球tennis
    • 足球football
    • 電子競技Gaming
  • 吃喝玩樂
    • 美食
    • 開箱評測
    • 棒球
    • 運動健身
  • 電腦手機軟體
    • 免費軟體
      • Google Chrome
    • 社群軟體
      • LINE
      • Facebook
      • Instagram
    • WordPress
    • 電腦維修
    • 程式語言
  • 動漫電玩
    • 模型玩具
    • 手機遊戲
    • 日本動漫

© 2021 生活稿什麼