文 | 木凡大人
上期發(fā)布了《關(guān)于淘寶店鋪全屏輪播圖制作代碼的方法》后，收到網(wǎng)友詢問，如何在一張大海報(bào)上添加多條鏈接？
今天@木凡大人就收集整理了關(guān)于在一張海報(bào)上添加多個(gè)鏈接的三個(gè)簡單方法，這也許是我最后發(fā)布有關(guān)淘寶的教程了。話不多說，咱們來看具體操作步驟。
方法一：碼工助手
首先打開碼工助手，話說我很愛用啊，哈哈。有個(gè)<全屏設(shè)計(jì)代碼>，點(diǎn)擊進(jìn)入。
進(jìn)入后的界面
具體操作界面
注意，先注冊登錄。不然做好了提示需要注冊，內(nèi)容一下子全沒了。
制作好一張海報(bào)，大小1920x600尺寸，我是借用了自己平時(shí)收藏的海報(bào)來做案例。已經(jīng)上傳至淘寶圖片空間，具體怎么操作，看之前的教程，這里不贅述。
然后，復(fù)制圖片地址到碼工助手全屏海報(bào)制作界面<圖片地址>，然后點(diǎn)擊載入圖片。<店鋪類型>按自己店鋪類型選擇。<模塊間隙>這里默認(rèn)。
<圖片鏈接地址>，可增加多個(gè)跳轉(zhuǎn)鏈接。可以是專題頁面，也可以是寶貝鏈接。建議先添加。
然后在圖片上添加熱點(diǎn)。因?yàn)楹?bào)上有四個(gè)女模特，所以我加了四個(gè)熱點(diǎn)，對(duì)應(yīng)四個(gè)不同的鏈接。具體如圖：
話說，添加熱點(diǎn)時(shí)，綠色線框容易飄。這點(diǎn)得吐槽下。這個(gè)看手感，你懂得。
然后，預(yù)覽下效果。保證海報(bào)上的四個(gè)位置在點(diǎn)擊后能跳轉(zhuǎn)到四個(gè)不同的鏈接。
預(yù)覽OK，然后點(diǎn)擊<獲取代碼>，復(fù)制內(nèi)容。
然后回到賣家中心-店鋪裝修-自定義區(qū)-編輯-標(biāo)題不顯示-源碼-插入復(fù)制的代碼-確定。具體操作，看上一篇。樓主比較懶，不截圖了哈，望見諒。
然后預(yù)覽，當(dāng)當(dāng)當(dāng)~逐個(gè)點(diǎn)擊下，OK，完美。
方法二：PS切片
這里需要提醒下，PS切片法，目前木凡大人只會(huì)制作950寬的海報(bào)，全屏的海報(bào)可以用第一個(gè)方法。這個(gè)方法僅針對(duì)950尺寸，就是淘寶默認(rèn)的海報(bào)尺寸。
首先制作好一張950x600的尺寸，嘿嘿，換了個(gè)尺寸，美女看得更清晰。用PS打開，如圖：
點(diǎn)擊工具欄的切片工具，如圖：
然后把整張圖切成四個(gè)方塊，每個(gè)方塊的底部要保持在一條線上，藍(lán)色的線框就是，如圖：
然后，點(diǎn)擊菜單欄-文件-存儲(chǔ)為web所用格式。
格式為<僅限圖像>，然后保存。
生成了一個(gè)image文件夾，有四張圖，而且還編好號(hào)了。然后把圖片上傳到淘寶圖片空間，如圖：
重復(fù)步驟，回到賣家中心-店鋪裝修-自定義區(qū)-編輯-標(biāo)題不顯示-插入圖片空間圖片。
插入圖片時(shí)，按照123的順序插入。插入完成，如圖：
然后編輯這四張圖片，給每個(gè)圖片添加一條跳轉(zhuǎn)鏈接。
點(diǎn)擊確定，如圖：
完整的950大圖完成啦！預(yù)覽，發(fā)布站點(diǎn)，完美！
方法三：DW熱點(diǎn)
這個(gè)方法要求先把海報(bào)上傳到淘寶圖片空間。用的還是寬950的圖片，我已經(jīng)上傳到Dreamweaver界面如下：
點(diǎn)擊圖片，出現(xiàn)如圖設(shè)置欄，添加熱點(diǎn)地區(qū)為標(biāo)紅區(qū)域。
根據(jù)海報(bào)需求，我選擇的是矩形選框。添加如圖所示的熱點(diǎn)區(qū)域：
想改變選框大小，點(diǎn)擊設(shè)置區(qū)域的黑色箭頭就行。選框大小沒有要求，隨意設(shè)置，只要用戶在點(diǎn)擊圖片（如點(diǎn)擊購買字眼）時(shí)確保能點(diǎn)擊到就行。
點(diǎn)擊每個(gè)熱點(diǎn)，在設(shè)置區(qū)域，添加跳轉(zhuǎn)鏈接（專題、寶貝鏈接），目標(biāo)_blank，表示跳轉(zhuǎn)鏈接在新窗口打開。
回到拆分界面，把海報(bào)地址粘貼到標(biāo)紅的位置。
這里提醒下，如果店鋪裝修使用多個(gè)這種方法的話，把圖片上標(biāo)紅的Map位置，改為map1、map2...不然保存后，多個(gè)自定義相互之間會(huì)有沖突。
最后，還是重復(fù)，回到賣家中心-店鋪裝修-自定義區(qū)-編輯-標(biāo)題不顯示-源碼-插入復(fù)制的代碼-確定。預(yù)覽如圖：
點(diǎn)擊一個(gè)區(qū)域，就會(huì)出現(xiàn)藍(lán)色色塊，這個(gè)方法還是不錯(cuò)的，可以制作元素多樣的海報(bào)，靈活性比較好。
好了，這是制作大海報(bào)添加多個(gè)鏈接的三個(gè)方法，具體簡單或是不簡單，看大家的習(xí)慣了。
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。
望大家共勉。
- END -
我是@木凡大人，熱愛生活，樂于分享。
本文由@木凡大人 原創(chuàng)，轉(zhuǎn)載請(qǐng)注明，請(qǐng)尊重原創(chuàng)。
