這是一個非常普遍的問題。以下圖片實例說明《三合一網上商店》課程的三個主要部份。當訪客有興趣想對其中一個部份了解更多時,我們希望用戶可以按指示 地方,跳到該項功能的更詳細網頁。
ImageMap
簡單的一個圖片超連結不能跳到互相不同的網頁。分成三幅圖片時排版又變得複雜不易管理,以Flash來做嗎? 但手機上觀看又有問題。最好的方法是利用 ImageMap。
首先設計建立你的圖片,然後在 Nextoffice Writer 開一個新文件將圖片滙入。由於最後會將圖片滙出成 HTML 文件,為了消除過多的上下左右空白的地方,先設定紙張大小等於圖片大小。
然後選取圖片,按 “Edit” -> “imagemap”, 在 imagemap 編輯器打開圖片,現在加入要加入的超連結的範圍,例如拖拉一個橢圓形作為網上商店模版的超連結,輸入超連結位置,重複以上動作加入其他兩個超連結。
現在儲存圖片,然後將文件滙出成為 HTML。在滙出目錄內打開剛才滙出的 HTML 文件,你會發現在顯示的圖片中,在先前已訂義的範圍內按下會跳到所訂義的超連結。
餘下的問題就是如何將 HTML 文件中的 Image Map 拷貝到網頁或 CMS 內,以記事本打開 HTML 文件,找到 Image Map 的位置,將內容拷貝到 CMS 頁內。
由於圖片的路徑已改變不再是C:\,你要先把圖片上傳到 CMS 然後修改 Image Map 代碼所指路徑。
如果你是用 Responsive Theme, 由於圖片在移動設備顯示時會自動調整大小,訂義的3個選取區的位置要作相對調整,做法是加入一個叫 “Responsive Image Maps” 插件。
了解更多網頁設計內容管理系統。