前言

最近接了一个小项目，江西省方志馆，前端的页面开发用的是原生的前端三剑客，在交流期间这块没学好就直接上手Vue了，属实没学好这块o(╥﹏╥)o，这篇文章主要记录前端三剑客一些较高级的用法🐶。

原生HTML

一张图片如何做到区域点击跳转

• 一张静态图片想要做到点击不同区域跳转不同页面，怎么做呢？

如上图所示,主页放置的是一张图片，想做到的效果显而易见，解决方案如下：

<img src="/images/collection/collection.png" alt="" usemap="#Map">

<map name="Map">
    <area shape="rect" coords="3,195,193,538" onfocus="blur();" href="">
    <area shape="rect" coords="212,182,408,528" onfocus="blur();" href="">
    <area shape="rect" coords="427,198,620,545" onfocus="blur();" href="">
    <area shape="rect" coords="640,161,835,508" onfocus="blur();" href="">
    <area shape="rect" coords="853,220,1048,566" onfocus="blur();" href="">
    <area shape="rect" coords="1067,204,1267,551" onfocus="blur();" href="">
</map>

• 用到的是img标签中的usemap属性，下面的area标签中的shape与coords属性实现不同区域的跳转，关于其中该放置什么类型的参数，这边就不介绍了，这里只提供解决方案。