文 | 木凡大人
上期發(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)丙躏，對應(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è)方法僅針對950尺寸幢尚，就是淘寶默認(rèn)的海報(bào)尺寸侠草。
首先制作好一張950x600的尺寸边涕，嘿嘿褂微，換了個(gè)尺寸，美女看得更清晰式撼。用PS打開著隆，如圖：
點(diǎn)擊工具欄的切片工具美浦，如圖：
然后把整張圖切成四個(gè)方塊浦辨，每個(gè)方塊的底部要保持在一條線上沼沈，藍(lán)色的線框就是列另，如圖：
然后页衙，點(diǎn)擊菜單欄-文件-存儲為web所用格式。
格式為<僅限圖像>旱函，然后保存。
生成了一個(gè)image文件夾含长，有四張圖伏穆，而且還編好號了枕扫。然后把圖片上傳到淘寶圖片空間，如圖：
重復(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)載請注明重窟，請尊重原創(chuàng)。
