如何在 html 和 css 上的图像链接轮廓上添加颜色？

Question

Hello guys this my example image all of the boxes are linked, and how can i put a outline color to each of them? the image is a example of what i want to do. Thanks in advance if who ever answer it correct :)

                    <div class="panel-heading">
                        1st Floor Map
                    </div>
                    <div class="panel-body">
                        <img src = "img/wetmarket.png" usemap= "#a46">
                        <map name="a46">
                            <area shape="rect" coords="19,120,95,180" alt="Sun" href="#1st_tenant" data-toggle="modal"  title = "Electric reader"  data-placement='top' class = "resetPrice">   
                        </map>
                        <!-- /.table-responsive -->
                    </div>

Answer 1

The jQuery maphilight plugin might be useful for what you are attempting to do.

http://davidlynch.org/projects/maphilight/docs/

It's designed for applying style when the imagemap links are hovered, but you might be able to make some changes to the JavaScript code if you want the "highlighting" visible all the time.