map标签结合图片的相应切换

map标签和切换

我们有时候呢，遇到一种情况，图片的某些特定区域需要加map，还需要这个图片组，我们该怎么处理呢？
首先创建

<img id="five" src="3.jpg" usemap="#lead" >
 <map name="lead" ><area shape="rect" coords="" target="_blank" href=""></map>`

然后用js实现图片切换，

        <script type="text/javascript">
            window.onload=function(){
                var header2=document.getElementById("header2")
                var button1=document.getElementById("button1")
                var button2=document.getElementById("button2")
                var img=document.getElementById("five")
                var arr1=['3.jpg','4.jpg',"5.jpg","6.jpg","7.jpg","8.jpg"]
                var index=0
                var timer
                img.src="3.jpg"
                button1.onclick=function(){
                        index=(++index)%5
                        img.src=arr1[index]
                    }
                button2.onclick=function(){
                    index=(--index+5)%5
                    img.src=arr1[index]
                }

            }
            
        </script>

这样就实现效果了
第一次发博客
谢谢大家观看。