Revise the color of the selected image

click here for image description

I'd like the area's color to change when the mouse hovers over it.

<!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"gt;
    <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>

I tried changing the background color of the area tag using CSS but failed.

htmlcssimagemap

Answer №1

Deciding not to assist with images and map areas but rather demonstrate how to create an interactive country map using in-document SVG.

An in-doc SVG provides more control over user interaction compared to using <img> with <map><area>. An SVG is like an XML document that can be styled and manipulated using CSS and Javascript, unlike a static image.

I sourced a free SVG map of South Korea from this resource and customized it to display an interactive country map below.

You can find many SVG references online for more details, but here's a summary of my process:

  • Download the SVG and embed it into the main HTML document as an 'in-doc' element.
  • Hide it from view by setting dimensions to 
    width="0" height="0"
    .
  • Define province countries within <defs> using <path> elements as <symbol> for later use.
  • Combine individual <symbol> instances into a new one representing the entire country.
  • Use 
    <svg><use href="#South-Korea"></svg>
    in the main HTML to show the interactive map.

After these steps, you can apply regular CSS styles to manage colors, line styles, animations, and more.

I included an anchor <a> in the <symbol> for Seoul to demonstrate linking to its Wikipedia page.

This may not be the exact answer you're looking for, but it could be the solution you need. Feel free to ask for further assistance...

For more intriguing SVG maps, check out resources like d-maps.com's South Korea section.

Due to character limitations, please refer to my Codepen Demo for additional details. You can easily duplicate and modify it according to your preferences.

A snippet displaying part of the country map.

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

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

/* Additional CSS styling content from the original post */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text fades into view from the bottom after a line break using CSS and JavaScript

I'm looking to create a unique fade reveal text effect for a multi-line H1. The goal is for each line of the text to fade up from its own row, rather than simply revealing from the bottom. Here's an example I've already developed, but it cu ...

jqueryhtmlcssanimationheading

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

htmlcssfont-size

Increase the value only when there is existing code present

I currently have a MySQL table with two columns. The first column stores IP addresses, while the second column holds integers that need to be incremented. Whenever a new IP address visits the website, the integer associated with that IP should increase by ...

phpmysqlhtml

What's the best way to display two checkboxes on a single line?

I am working with checkbox filters in WooCommerce and I want to organize them so that two checkboxes appear in one row, followed by the next two in the second row, and so on. The issue can be seen at this URL. I also want this style to apply to "Product Co ...

csscheckboxwoocommercehook

What's the best way to ensure uniform card height in Material-UI?

Is there a way to ensure consistent card height in Material-UI without setting a fixed height? I want the card heights to dynamically adjust based on content, with all cards matching the tallest one on the website. How can this be achieved while also addin ...

cssreactjsmaterial-ui

Stop child elements from spilling out of the parent container without using fixed height measurements

I am in the process of creating an angular component with a header, buttons, a table, more buttons, and a footer. However, I am facing some challenges with the layout. <my-component> <div>Header Section</div> <some-stuff class=&quo ...

htmlcssreactjsangularsass

Leveraging the back button in an AngularJS Mobile SPA

Utilizing AngularJS for my Single Page App (SPA), I am currently exploring the most effective way to handle the back button functionality on mobile devices. My setup involves a single JavaScript file, one HTML page, and no partials. The content is reveale ...

javascripthtmlangularjssingle-page-application

Changing the color of a pressed Bootstrap 4 button

After making changes to the bootstrap css class of the button such as the color, font size, and font color, I noticed that when I click and hold the mouse on the button, the color changes. Even though I set the color to green, when I click and hold the mo ...

htmlcssbuttonbootstrap-4

Certain Bootstrap 5 icons are failing to appear on the screen

I'm encountering an issue with Bootstrap 5 where certain icons are not displaying correctly. The bi-search icon shows up perfectly, but the bi-send icon is not being shown at all. I would usually include this in a code snippet, but it seems that featu ...

htmliconsbootstrap-5

Element obscured by dropdown content now clearly visible thanks to dropdown adjustment

Something strange is happening here - the Add question div shouldn't be visible. It's somehow appearing behind the dropdown content. I've attempted to adjust the z-index of the Add Question div, setting it to a lower number than the dropdown ...

htmlcssvue.jsz-index

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

Deciphering click event parameters in an AngularJS application

Currently, I am in the process of improving a feature in an existing application that has already been deployed. Unfortunately, all the JavaScript code is minified, and I only have access to the HTML files. I need to implement a function that triggers when ...

javascripthtmlangularjsonclickangularjs-scope

Including JavaScript in HTML Error 404

https://i.stack.imgur.com/aQDPG.png I am struggling to understand why this import is not functioning as expected. I have tried using script/import.js but it still fails to work. The error message I keep receiving is: 127.0.0.1 - - [09/Sep/2020 15:09:35] ...

javascriptpythonhtmlimport

Filter and transfer data from one Angular array to another

As a newcomer to Angular, I am working with an array of events containing multiple arguments. My goal is to filter these events and separate them into two new arrays: upcoming events and past events. Below is a snippet of the TypeScript code I am using: a ...

htmlarraysangulartypescript

What is the specific character code assigned to the "Enter" key on a

Check out this code snippet: http://jsfiddle.net/YttKb/ In my javascript, I am trying to add a new line of text using utf-8 coding. Which character should I use to make a new line? It seems like \n only creates a line break, not a new line of text. ...

javascripthtmlunicode

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...

javascripthtmlcsstextareaoverflow

Enhancing PHP calendar functionality to accurately detect days in upcoming months

Looking to enhance a PHP calendar script, everything seems to be functioning correctly except for displaying days from the next months which are not appearing on the grid. I've attempted to troubleshoot the issue myself with no luck, so I would greatl ...

phphtmlcalendar

Create a stylish layout with two div elements positioned side by side using flexbox for a responsive design

Struggling with my portfolio website, I encountered a challenge. I attempted to place two divs side by side, each containing text and an image. While the initial setup was simple, trying to make it responsive using flexbox has proven to be quite frustratin ...

htmlcssflexboxresponsiveportfolio

Update the output paragraph in an HTML dropdown list

Within my HTML code, there is a dropdown list followed by a paragraph. Inside the dropdown list, I have included options for various animals - Dog, Cat, Mouse, and Bird. When someone selects 'Cat' from the dropdown list and presses submit, I wan ...

html

Ways to ensure the image stays fixed even as the screen dimensions fluctuate. HTML/CSS

Struggling to create an HTML header with a title and image positioned on the right side, but facing issues with the image shifting over the title when screen size changes. How can I ensure the image stays in place? Have tried various solutions without succ ...

htmlcssimageposition