Change image selection color-CodePudding

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를 바꾸어 보았으나 실패하였습니다.

CodePudding user response：

You have to add a transition to area not being hovered as:

    h3 {
transition: 3s;
}
h3:hover {
    transform: translate(10px, 10px);
    transition: 2s;
}

CodePudding user response：

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.

snippet

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.