如何構建沒有圖像映射編輯器的圖像映射

圖像地圖只是簡單的HTML標籤

圖像地圖是激活您的網站的一個令人興奮和有趣的方式 - 通過它們,您可以上傳圖像,並將這些圖像的一部分點擊到其他在線資源上。 如果您處於困境中,並且不想下載圖像映射編輯器,則使用HTML標記創建映射非常簡單。

你需要一個圖像,一個圖像編輯器和某種HTML編輯器或文本編輯器。 當您指向圖像時,大多數圖像編輯器會顯示鼠標的坐標。 這個坐標數據是您開始使用圖像映射所需的全部。

創建一個圖像映射

要創建圖像地圖,首先選擇一個圖像作為地圖的基礎。 圖像應該是“正常大小” - 也就是說,您不應該使用大到瀏覽器會縮放的圖像。

插入圖像時,您將添加一個標識地圖坐標的額外屬性:

當您創建圖像地圖時,您將創建一個可在圖像上單擊的區域,因此地圖的坐標必須與所選圖像的高度和寬度一致。 地圖支持三種不同類型的形狀:

要創建區域,您必須隔離您要映射的特定坐標。 地圖可以由圖像上的一個或多個定義區域組成,點擊後可打開一個新的超鏈接。

對於矩形 ,您只需映射左上角和右下角。 所有坐標都列為x,y(上,下)。 因此,對於左上角0,0和右下角10,15,您可以輸入0,0,10,15 。 然後將其包含在地圖中:

對於多邊形 ,可以分別映射每個x,y坐標。 Web瀏覽器自動將最後一組坐標與第一組坐標相連接; 這些坐標內的任何內容都是地圖的一部分。

圓形只需要兩個坐標,如矩形,但對於第二個坐標,您需要指定半徑或與圓心的距離。 所以,對於以122,122為中心並且半徑為5的圓,你可以寫122,122,5:

所有區域和形狀都可以包含在同一個地圖標記中:

注意事項

在20世紀90年代的Web 1.0時代,圖像地圖在21世紀初很常見 - 圖像地圖通常構成網站導航的基礎。 設計師將創建某種圖片來指示菜單項,然後設置地圖。

現代方法鼓勵響應式設計,並使用級聯樣式表來控制頁面上圖像和超鏈接的位置。

儘管HTML標準仍支持地圖標記,但使用外形小的移動設備可能會導致圖像地圖出現意外的性能問題。 另外,帶寬問題或破碎的圖像會影響圖像映射的值。

所以,隨時可以繼續使用這種穩定的,充分理解的技術 - 知道現在有更多的高效替代品可以與網頁設計師一起使用。