主頁 / 網站制作教學 / 如何在同一張圖內加入幾個超連結?

如何在同一張圖內加入幾個超連結?

這是一個非常普遍的問題。以下圖片實例說明《三合一網上商店》課程的三個主要部份。當訪客有興趣想對其中一個部份了解更多時,我們希望用戶可以按指示 地方,跳到該項功能的更詳細網頁。

online-shop-package

簡單的一個圖片超連結不能跳到互相不同的網頁。分成三幅圖片時排版又變得複雜不易管理,以Flash來做嗎? 但手機上觀看又有問題。最好的方法是利用 Image Map。

首先設計建立你的圖片,然後在 Nextoffice Writer 開一個新文件將圖片滙入。由於最後會將圖片滙出成 HTML 文件,為了消除過多的上下左右空白的地方,先設定紙張大小等於圖片大小。

nextoffice-writer

然後選取圖片,按 “Edit” -> “imagemap”, 在 imagemap 編輯器打開圖片,現在加入要加入的超連結的範圍,例如拖拉一個橢圓形作為網上商店模版的超連結,輸入超連結位置,重複以上動作加入其他兩個超連結。

imagemap

現在儲存圖片,然後將文件滙出成為 HTML。在滙出目錄內打開剛才滙出的 HTML 文件,你會發現在顯示的圖片中,在先前已訂義的範圍內按下會跳到所訂義的超連結。

shop-html

餘下的問題就是如何將 HTML 文件中的 Image Map 拷貝到網頁或 CMS 內,以記事本打開 HTML 文件,找到 Image Map 的位置,將內容拷貝到 CMS 頁內。

imagemap-notepad

由於圖片的路徑已改變不再是C:\,你要先把圖片上傳到 CMS 然後修改 Image Map 代碼所指路徑。

如果你是用 Responsive Theme, 由於圖片在移動設備顯示時會自動調整大小,訂義的3個選取區的位置要作相對調整,做法是加入一個叫 “Responsive Image Maps” 插件。

了解更多網頁設計內容管理系統。

Facebook Comments

關於 WaiTing LI

香港SEO專家。專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。而SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。其他我關於宣傳推廣的文章亦取得很高排名。這方面搜尋引擎似乎亦給予我專家效應。

也查看

網站中文字體問題 – 細說原由,為何網頁無法顯示不同的中文字體?

網站中文字體並不像英語字體有麼 …

發表迴響