方法一：用map和area做
<img src='' usemap='#aaa'>
<map>
<area shape="poly" coords="156,218,170,201,233,189,295,187,342,202,346,222,322,281,304,289,262,280,244,275,219,285,192,288,167,258" style="outline:solid;" onclick="alert("test")">
</map>
做完以後放到手機版上發現，大跑版!!!所以我也沒有要認真講這個方法的意思，跑版的原因是他是吃pixel的，當在不同的螢幕上應該要乘上圖片的縮放比例才能準確標出位置。
網路上有一些寫好的js可以做，但是我插入以後還是覺得治標不治本。
第二個不推薦用map\area原因是不能選取的部分變色，area是不顯示的元素，所以吃不到css。
那這兩個都可以用svg完美的達成，所以我們就來講svg吧！
方法二：用svg
svg的概念其實就是在網頁上用文字畫貝茲曲線，所以他會是矢量檔，縮放不影響畫質。那麼要怎麼操作呢？
建立svg圖片
我們先去adobe illustrator上面隨便畫一個圖片
從右下角的圖層裡面可以看到:上面的圖層是圓形，裡面有一個圓形的路徑
下面的圖層是方形，裡面有兩個方形(矩形跟圓角矩形)的路徑
畫好以後我們就輸出成svg，點檔案>轉存>轉存為螢幕適用
然後選用svg的檔案形式存擋
存好檔了以後就用文字編輯器開啟，我是用atom，其他可以打程式碼的都可以。
打開以後就會是我們的code了
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<style>
.cls-1{fill:#ad5e5e;}
.cls-1,.cls-2,.cls-3{stroke:#000;stroke-miterlimit:10;}
.cls-2{fill:#e2c79f;}.cls-3{fill:#a0e0ac;}
</style>
</defs>
<title>工作區域 1</title>
<g id="方形">
<rect id="紅色" class="cls-1" x="75" y="93" width="165" height="165"/>
<rect id="褐色" class="cls-2" x="169" y="193" width="179" height="144" rx="12" ry="12"/>
</g>
<g id="圓">
<circle id="綠色" class="cls-3" cx="362" cy="367" r="87.5"/>
</g>
</svg>
對應我們剛剛做的圖層就是標籤<g>，方形路徑就是<rect>，圓形路徑就是<circle>，其他的不規則形狀是<path>(這邊沒用到)
我們順便發現很貼心的是id都幫我們用ai裡面的名稱命名好了，更爽的是style好像就是我們看得懂的css語法呢
完全沒錯呢，所以我們就加點簡單的語法讓這個圖片跟著點擊做些動作吧～
圖片內各區塊增加不同動作
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<style>
.cls-1{fill:#ad5e5e;}
.cls-1,.cls-2,.cls-3{stroke:#000;stroke-miterlimit:10;}
.cls-2{fill:#e2c79f;}.cls-3{fill:#a0e0ac;}
</style>
</defs>
<title>工作區域 1</title>
<g onclick="move(event)" id="方形">
<rect onclick="move(event)" id="紅色" class="cls-1" x="75" y="93" width="165" height="165"/>
<rect onclick="move(event)" id="褐色" class="cls-2" x="169" y="193" width="179" height="144" rx="12" ry="12"/>
</g>
<g onclick="move(event)" id="圓">
<circle onclick="move(event)" id="綠色" class="cls-3" cx="362" cy="367" r="87.5"/>
</g>
</svg>
<style>
.cls-1:hover,.cls-2:hover,.cls-3:hover{opacity:.5;transition.3s all;}
</style>
<script>
function move(e){
alert("你點了"+e.currentTarget.id+"!!!");
}
</script>
style裡面加入了hover所以在電腦上滑鼠放上去或是手機點擊的時候，飽和度會剩一半。
另外每個元素都加了點擊的事件，script會讓被點擊的物件的id跳出警告視窗，下面是寫好的demo來點點看吧
如果是要跳轉畫面的話，要搭配window.location="https:google.com"; 的js來執行，用href=""是行不通的喔
沒有留言:
張貼留言