Search code examples
htmlcssimagemap

Change image selection color

enter image description here

I want the color of the area to change when the mouse hovers over the area.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     area:hover{
    filter: opacity(0.9) drop-shadow(0 0 0 #ff0000);
}
    </style>
</head>
<body>
    <!-- Image Map Generated by http://www.image-map.net/ -->
<img src="전국지도.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="서울 관광지" title="서울 관광지" href="" coords="140,147,139,153,143,157,148,163,157,164,165,164,172,160,174,152,169,145,165,135,159,139,153,141,149,145" shape="poly">
    <area target="_blank" alt="인천 관광지" title="인천 관광지" href="" coords="121,146,121,159,122,170,125,175,133,170,135,155,131,149" shape="poly">
    <area target="_blank" alt="경기 관광지" title="경기 관광지" href="" coords="115,126,128,127,128,105,140,98,147,86,156,81,156,73,174,71,181,81,186,77,187,86,198,87,205,99,217,110,209,131,237,154,229,195,214,212,185,229,170,223,141,229,139,210,140,201,125,194,117,185,140,182,130,176,120,165,120,159,123,149,117,143,115,137" shape="poly">
</map>
</body>
</html>

area 태그를 css로 선택하여 background color를 바꾸어 보았으나 실패하였습니다.

Solution

  • Instead of helping (trying to figure out, actually) with images and map areas I decided to show you how you can create an interactive country map with an in-document SVG.

    Compared to an <img> with <map><area> an in-doc SVG will give you much more control over user interaction with the map. An SVG is essentially an XML document you can style and manipulate with all the benefits of CSS and Javascript, where an image is nothing more than a static, graphical element.

    I downloaded a free SVG map of South Korea and modified it to have an interactive country map in the below snippet.

    You can find plenty of SVG references online, so I won't go into specifics, but here is a summary of what I did:

    • Download the SVG and copy it into the main HTML document. A document in a document, hence in-doc.
    • Hide it from the users view by making it width="0" height="0".
    • Define <defs> section inside the SVG.
    • Define the country province <path> elements as <symbol> inside <defs> for later use (reusable elements because symbols don't show up in the viewport, they are just 'definitions').
    • Combined various <symbol> (provinces and specials) as new <symbol> (entire country), to be used in the main document HTML.
    • Defined <svg><use href="#South-Korea"></svg> in the main HTML document to show the final interactive map.

    Once that has been done, you can use 'regular' CSS to control colors, line styles, hover effects, animations, etc.

    I inserted an anchor <a> in the <symbol> for Seoul linking to its Wikipedia page, just to show how that is done.

    It may not be the answer you wanted, but it might well be the answer you needed. Let me know...

    Check out d-maps.com South Korea for more interesting SVG maps you could use.

    The number of character in my answer and code exceed the maximum allowed on Stackoverflow so I have to post the link to my Codepen Demo. Sorry for that, but upside is that you can fork it and easily modify it to your needs.

    snippet with only a partial country.

    .country {
    height: calc(100vh - 4em);
    padding: 2rem;
}

svg {
    display: block;
    width : 100%;
    height: 100%;
}

/*****************************/
/* Styling of the in-doc SVG */
/*****************************/
path         { fill: #f5f5f5; stroke: #000; stroke-width: 2px }
path:hover   { fill:  #ff0000; filter: opacity(90%)/* url(#dropshadow)*/ }
circle       { fill: blue; stroke: red; stroke-width: 4 }
circle:hover { fill: red; stroke: blue }

/* Seoul */
a path:hover  { fill: green }

/***********************/
/* DEMO page eye-candy */
/***********************/
* { box-sizing: border-box }

body {
    margin: 0;
    width: 100%; min-height: 100vh;
    background-color: #ddd;
}
h3 {
    margin: 0;
    padding: 1em;
    background-color: black; color: white;
    text-align: center;
}
    <h3>Showing usage of an in-doc SVG country (parts) map</h3>

<div class="country">
    <svg><use href="#South-Korea"></use></svg>
</div>

<!--
    In document SVG, hidden from view because of width/height=0
    Various <path> define the country/province outlines
    <symbol><use> combines various <symbol> into collections
    <svg><use> In <body> shows the selected <symbol>
-->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!--
        Copyright (c) 2017 Pareto Softare, LLC DBA Simplemaps.com
        Free for Commercial Use, full terms at  http://simplemaps.com/resources/svg-license
        Attribution is appreciated! http://simplemaps.com

        map downloaded from: https://simplemaps.com/resources/svg-kr
    -->
    <style>
        /* All styling is done in the document main CSS section */
    </style>

    <defs>
        <filter id="dropshadow" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>

        <!-- Define Province/Islands symbols that make up the entire country -->
        <symbol viewbox="0 0 1000 1064" id="KOR2496" name="Gangwon"><path d="M762 402.5l-1.6-0.1-5.3-1.2-5.1 2.3-10.9-4.1 1.7-4.7-0.5-4.4-1.4-4.9-0.4-5.5 2.1-5.3 1.7-4.9-1.2-1.5-1.4-1.3 0.7-4.5-11.6-0.9-3.4-1.9-3.7-1.6-1.5-3.6-1.1-4.2-5.2-2.5-3.3-4.9-0.7-6.5 1.1-4.9 2.7-2 3-1.1 4.6 1.8 3.8-2.8-1.6-4.6-4.9-3-5.4-1.2-4.3 2.2-4.2 1.1-5.8-2.7-6.2-1-2.1 0.8-1.7-0.2-1.4-1.8-1.9-0.8-4.5 3.5-4.7 1.9-0.4-3.5 0.4-3.4-2.8-1.4-3-0.7-2.2-3.9-4.4-0.4-4.3 2.1-2.8 3.5 1 4.9-0.5 4.5-0.9 4.2-4.1-0.3-4.7-1.1-3.9-1.6-4.1-2.2-3.1-2-3.2-1.4-4.1-0.5-4.1-0.8-4.2-2.7-3.7-2.9-3.8 0.1-3.8 1.2-3.4 0.6-2.9 0.2-1.1-2.6-3.2-3.3 0.3-2.8-1.6-1.7-7.5 0.8-4.8 1.6-1.4 0.7-1.5 0-2.2-1.3-1.7-1.9 2.7-4.2 4.6-3.3 1.8-4.2-2.9-0.8-9-1.5-8.8-3.1-3.7 2.8-3.1 1.7-3.8-0.8-3.2 2.4-5.2 3-5.2 1.2-2-2.7 0-4.3-6-6.4-8.1 2.7-3 3.7 0.9 9.7-3.2 2.2-1.1 1.3-1.2 1.1-2.7-1.5-4.8-0.4-4.9 1.2 1.4-9.6-16.8 2.3-16.7 4.6 8.5-15.9 7.1-17.4 9.7-20.8 1.2-4.5-0.9-4.5 2.1-3.6 2.9-3.6 3.2-1.3 1.6-3.5-1.8-3.1-2.3-2-3.8-0.4-3.9-1.5-5.3-0.7-8.9-4.9-4-1.7-4-2.6-4.3-0.7-4.3 1.4-3.5-3 0.3-3.3 1.7-3.4 0.6-3.9 0.1-4.1-4.2 1.4-1.9-2.4 4.6-5.5-0.8-3.6-1.2-3.6 0.9-2.7-0.1-3.3-0.3-3.1 8.1-5.9 3.2-1.1 1.8-2.8 0.8-8.1-3.7-5.8-3.1-0.6-2.9-1.3-2.2-6-3.5-0.1-3.8 0.2-4-3-2-5.3-0.8-9.5-1.5-4.7-1.1-1-1.2 0.3-0.9 0.8-1 0.1-2.7-1.9-6.6 2.3-6.1-1.4-2.4-1.5-2.5-2.3-0.1-3.8 1.2-3.6 1.6-2.6-1.1-0.9-1.3-0.3-1.3 0.2-1.1 0.9-2.1 2.7-2.4 2.4-3.6 0.6-3.1-2.1-0.6-2-0.3-2-1.1-0.7-1.2 1.3-0.4 2-0.1 6.6-2 3.3-5.8-2.8-5.3-4.8-1.9-2-2 0.3-1.7-2.6-1.1-3.3-1.5-1.7-1.7-1.4-1.3-3.2-7.9-5-3.2-1.6 1-1.1 8.6-7.2 10.1-6.3 10.6-4.4 10.2-1.1 5.1 0.6 19.5-1.7 15 4.5 4.8-0.4 9.3-2.8 30.5-2.7 1.3 0.9 2 2.9 1.9 2 2.2 0.5 10.5-2.2 16.6 1 10.8-0.9 10.8-3.8 10.1-6.6 8.4-8.8 3.7-5.3 3.1-5.6 2-6.3 0.7-7.1-1.3-7-0.4-3.5 1-2.6 4.3-3.4 9-4.7 12.1 24 1.5 6.4 3.7 9.7 14 27.7 10.9 29.1 1.8 3.1 5.6 7.1 2.2 5.9 26.4 37.8 10.2 14.9 12.3 13.6 1.7 1.4 8.2 9.7 0.5 4.1 0 4.9 1 4.2 5.6 3.1 1.6 3.4 4.6 15.1 2.1 3.4 2.5 1.5 2 2.2 7.2 14.2 4.4 5.4 1.5 3 0.5 3.2 1.1 3.1 7.7 8.4 2.4 6.9 2.2 15.1 2.9 8.2 8.2 11.4 0.6 2.3-1 2.3-1.4 2.2-1 2.2 0 1.9 1.1 6.2 1.4 17.7 1.5 8.2 5.2 16.6 0.5 8.2-1.7 7.5-3.5 6.9-2.9 8.1z"><title>Gangwon</title></path></symbol>
        <symbol viewbox="0 0 1000 1064" id="KOR2497" name="Seoul">
            <a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Seoul">
                <path d="M398.4 211.4l-1.5 5.7 4.4-0.1 3.7-1.3 3.2-0.1 1.2 2.9-0.4 3-2.2 1.1-2.4 1.6 0 3.6 1.3 1.5-2.7 3.7-1.5 2.6-4.1 2.4-4.5 1.1-4.7 2.3-1.8-4.1-3.9 0.9-4 1.2-2.7 1.6-2.9 0.5-6.8-0.3-4.7-6.1-4.6-1.4-3.1-2-0.8-5.8-3.2-4.4-3.7-4.6 2.3-5.1 4.5 0.2 5 3.1 3.8-1.2 3.4-2.1 0.2-3.4 0.9-3.2 7.1-0.7 3.7-4.6 2.2-4.8 3.2-3.3 4.9-1.2 5.7 0.4 2.7 4.7 1.1 6.4 1.6 4.4 0.1 4.9z">
                    <title>Seoul (links to info at Wikipedia)</title>
                </path>
            </a>
        </symbol>
        <symbol viewbox="0 0 1000 1064" id="KOR2498" name="Gyeonggi"><path d="M245.6 280.6l-0.7 1.2-2 2.1-1.4 0.6-1.9 0.3-1.6-0.7-1.4-2.9-1.5 0.8-0.7-0.2 0.5-4 0.9-2.7 1.1-1.6 1.3 0.9 1.1 1.9 1.2 0.9 3.9 2.1 1.2 1.3z m50.4-1.9l-1.3 1.6-1.8 0.4-1.2-0.9-1.3 0.1-1.1-0.6-0.3-2.5 0.3-2.6 1.3-1.8 2.8-1.5 3.6 0.3 1.6 1.1 0.6 2.4-0.7 0.9-1.7 0.5-0.6 1.3-0.2 1.3z m15.2-7.5l0.6 1.6 1.9 1.1 3 1.2 0.8 0.9 0.8 2.6-0.8 1.8-8.1 6.5-3.7 0.4 0.1-1 1.7-2.3 0.2-1.4-0.7-1.1 2-2.4 0.1-2.4-0.8-2.9-1.2-2-1.2-1.4 0.4-0.4 2.6 1.3 2.2-2 0.5 0.2-0.4 1.7z m-139.3-74.8l-0.9 0.4-1.4-3.5 0.2-1.8 1.2-0.2 1.8 0.3 1.1 1.1-0.5 2.2-1.5 1.5z m107-0.9l-3.2 0.2-10.7-8.4 1.4-1.2 0.6-1.6 0.9-3.8 1.3-2 0.9-0.7 0.9-0.3 0.6 0.4 0.6 1.4 0.5 3.7 1 2 1 1.1 4.1 3.4 1.5 1.8 0.3 1.9-1.7 2.1z m-253.9-24l0.8 0.7-0.3 1-1.1 0.3-1.5-0.4-1.1 0.5-1 1.2-1.4 0.7 0.7-2.1 1.1-0.8 0.3-1.1 2.1 0.1 1.4-0.1z m239.1-6.6l3 1.8 3.1-0.1 2.9 0.5 1.5 1.6-1.1 3.6-2.8 2.4-3.4 0.3-6.6-1.5-3.3 1.6-1.5 0-0.6-2.2 0.3-0.7 1.8-5.5 2-1.9 2.2-0.6 2.5 0.7z m40 37.3l-1.8 4.2-1.6 1.4-1.2 0.2-0.9-0.5-1.7-1.8-1.2-0.7-0.8 0.3-1.3 1-8.3 0.5-3.1-1.5-3.3-4.3 4.9-1.3 1.2-0.8 1.3-2.1-0.2-0.9-0.9-0.6-0.8-1.1-5.6-10.8-0.4-1.7 0.6-2.1-0.1-9.5 0.6-2.2 1.6-0.5 3.7-4.4 2.9-0.7 2.5 1.8 2.4 2.8 2.4 2.2 5.1 2.6 2 2 0.8 3.2-0.2 1.7-0.8 2.7-0.2 1.2 0.4 1.3 1.4 2.7 0.4 1.5 0.5 7.2-0.5 1.7 0.8 1.1 1.4 3-2 1.2z m-287.2-37l-1.2 0.7-1.2-0.1-1 0.4-0.8 0.8-1-1.6-1.2-1.7 0.5-1.5 2.6-2.2 2.5-2.4 1.2 0.2 1.2 0.6 0.3 1.3-0.8 1.8-0.4 2-0.7 1.7z m2.9-34.2l1.8 2.1-0.3 3-2.2 1.6-3-1.9-4.1 0.4-0.8 0.4 0.1 2.1 1.5 0.7 1.8 0.4 0.9 0.7-3.2 2.6-6.5-0.9-4.8-4.1 1.6-7.1 4.1 1.4 8.7-3.1 4.4 1.7z m454.9 169.6l-1.1 2.1-1.3 1.9-2.5 1.9-1.7 3.2-7.6 14.1-3.9 2.8-0.9-1.2-3.1-0.6-2.5 2.6-1.3 3.3-1.9 2.5-4.1 1.7-2.5 2.8-1.5 5.8-5.2 1.8-6.8 3.3-7.1 2-7.4-1-6.1-5.1-6.9-3.1-13.1 5.6-6.2 0-7.5-1.5 2.1-1.6 2.4-1.1 1.7-1.9 1-4.8-0.3-0.9-1.7-2 0.8-0.8 1.7 0 2.2-1.3 1.4-0.2 1-0.7 0.5-2.3-9.5 2.7-1.4 2 0.5 6.1-1.2 1.4-3.7 1.2-5.2-0.7-6.2-3.6-5.6-5.6-2.2-5.3 9.5-1 0-1.2-2.1-1.5 1.7-0.2 1.7 0.1 1.6 0.5 1.3 1.1-0.6-3.8-2.2-3.4-1.6-3.8 1.2-5.3-1.8-0.8-1.4 1.8-0.8 3.2-0.3 3.2-0.8 3.5-1.5 0.8-1.5-1.5-3 0.6-3 0.8-7.3-2.2 0-2.3-0.7-1.9 0.6-2.7-0.3-3.4 1.8-3.4 2.2-3 2.5-1.2 2.7-1 4-0.1 4.3-1.2 0.9-1.3 0.3-3.7-1-0.7-2.2 1.2-3.3 2.9-2.1-0.5-1.5-0.9-0.8-1.5 0-2.4-3.7 1.9-3.1 2.2-5.6 6.1-1.5 1.2-1.8 0.6-1.7 0-1-1.1 0-1.8 1-1.8 2.3-3.3-4.6 1.1-1.4-0.5-0.6-2.7 0.9-2 1.9-1.1 2.2-0.8 1.6-0.9 1.9-2.6-0.5-0.7-4.2 0.6-1.4-0.9-1.1-2.1-1.1-2.7-1.2-2.5 0.7-0.2 1.4-1.2 1.2 0.9 1.7-0.1 3.1-0.8 2.5 0.7 2.1 1.3 2.1 0.6 2.4-1.2-0.2 2.3 0.2 2.1 0.8 1.7 1.5 0.7 1.7-0.6 0.7-1.9 0.8-4.3 2.7-4 2.2 0.4 2.5 1.5 3.5-0.6-0.8-1.6-1-1.2-1.2-0.8-1.5-0.4-2.2 0-1-1.5-2.3-0.4-1.9 0.6-1.9-0.1-3-0.6-5-1.6-6.9-5.2-0.3-2.3 3-4.5 2.1-2.1 5-1.5 3.3-2.4 2.2-4.3 1.5-5-1.5-2.4-2.6-1.7-1.7-3.9 0.1-4.7-9.4-9-15.3 0.5-2-4.7-3-5.1-1.8-1.8-0.1-2.7-0.6-4-1.7-6.3-2.3-16.5 0.6-2.7 2.1-0.4 8.7 3.2 2.8-0.6 2.3-1.1 2.1-0.4 2.1 1.4 0.8 2.4 0.3 3.6-0.2 3.8-0.9 2.6-0.1 4.7 4.9 4.1 6.2 2.6 3.8 0.2-3-3.1-9.1-6.6 2.6-7.1 0.8-4.2-0.6-3-1.5-3.1-0.3-4.1 0.7-4 1.6-3.2-1.2-1.5-1.5 0.2-2.4 1.7-1.1-17.3 0.8-4.7 1.9-1.4 3-0.4 4-1.5 6.3-5.1 13.6-20.7 2.7-2.8 6.1-4.7 2.6-3.1 5.4-13.3 1.9-2.5 3.2 1.6 7.9 5 1.3 3.2 1.7 1.4 1.5 1.7 1.1 3.3 1.7 2.6 2-0.3 1.9 2 5.3 4.8 5.8 2.8 2-3.3 0.1-6.6 0.4-2 1.2-1.3 1.1 0.7 0.3 2 0.6 2 3.1 2.1 3.6-0.6 2.4-2.4 2.1-2.7 1.1-0.9 1.3-0.2 1.3 0.3 1.1 0.9-1.6 2.6-1.2 3.6 0.1 3.8 2.5 2.3 2.4 1.5 6.1 1.4 6.6-2.3 2.7 1.9 1-0.1 0.9-0.8 1.2-0.3 1.1 1 1.5 4.7 0.8 9.5 2 5.3 4 3 3.8-0.2 3.5 0.1 2.2 6 2.9 1.3 3.1 0.6 3.7 5.8-0.8 8.1-1.8 2.8-3.2 1.1-8.1 5.9 0.3 3.1 0.1 3.3-0.9 2.7 1.2 3.6 0.8 3.6-4.6 5.5 1.9 2.4 4.2-1.4-0.1 4.1-0.6 3.9-1.7 3.4-0.3 3.3 3.5 3 4.3-1.4 4.3 0.7 4 2.6 4 1.7 8.9 4.9 5.3 0.7 3.9 1.5 3.8 0.4 2.3 2 1.8 3.1-1.6 3.5-3.2 1.3-2.9 3.6-2.1 3.6 0.9 4.5-1.2 4.5-9.7 20.8-7.1 17.4-8.5 15.9z m-76.3-89.2l-0.1-4.9-1.6-4.4-1.1-6.4-2.7-4.7-5.7-0.4-4.9 1.2-3.2 3.3-2.2 4.8-3.7 4.6-7.1 0.7-0.9 3.2-0.2 3.4-3.4 2.1-3.8 1.2-5-3.1-4.5-0.2-2.3 5.1 3.7 4.6 3.2 4.4 0.8 5.8 3.1 2 4.6 1.4 4.7 6.1 6.8 0.3 2.9-0.5 2.7-1.6 4-1.2 3.9-0.9 1.8 4.1 4.7-2.3 4.5-1.1 4.1-2.4 1.5-2.6 2.7-3.7-1.3-1.5 0-3.6 2.4-1.6 2.2-1.1 0.4-3-1.2-2.9-3.2 0.1-3.7 1.3-4.4 0.1 1.5-5.7z"><title>Gyeonggi</title></path></symbol>

        <!-- Define cities, villages, locations, water, roads etc -->
        <symbol id="symbol-south-korea-specials" viewbox="0 0 1000 1064"> 
            <!-- Not sure what these are for. Cities, capitals? -->
            <circle r="15" cx="382.7" cy="319.5" id="0"><title>some city 1</title></circle>
            <circle r="15" cx="449.5" cy="323.2" id="1"><title>some city 2</title></circle>
        </symbol>

        <!-- Construct the country from <symbol> definitions -->
        <symbol id="symbol-south-korea">
            <use href="#KOR2496"></use>
            <use href="#KOR2497"></use>
            <use href="#KOR2498"></use>
        </symbol>

        <symbol id="South-Korea">        
            <use href="#symbol-south-korea"></use>
            <use href="#symbol-south-korea-specials"></use>
        </symbol>
    </defs>
</svg>