Document

Map in html file

Атрибут name даёт карте имя, чтобы на неё можно было ссылаться. Атрибут должен быть определён и иметь не пустое значение без пробелов. Значение атрибута name не должно совпадать с регистром совместимости со значением атрибута name другого элемента карты в том же документе. Если также указан атрибут id, то они оба должны иметь одинаковое значение.

Пример

map name="primary"> area shape="circle" coords="75,75,75" href="left.html"> area shape="circle" coords="275,75,75" href="right.html"> map> img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"> 

Живой пример

Ожидаемые выходные данные

Живой пример выше должен выглядеть как нижеследующее изображение (при использовании клавиши на клавиатуре):

Для ссылки left.html :

Для ссылки right.html :

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 4 мар. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

How to Make a Clickable SVG Map With HTML and CSS

Rufai Mustapha

SVG, or Scalable Vector Graphics, is a versatile image format that you can use in a wide range of applications, from web design to print media and data visualization.

The scalability, small file size, and accessibility of SVG images make this format a popular choice among designers and developers.

Maps are a powerful tool for data visualization, providing a visual representation of data that can help viewers understand patterns and relationships that may not be evident in other types of visualizations.

In this article, you will learn how to make interactive maps using HTML and CSS. These maps will remain light-weight because we’ll be using SVGs.

If you have basic knowledge of HTML and CSS you’ll be able to understand this tutorial.

Here’s what we’ll cover:

II. How to Set Up the HTML File

• How to Create the Basic HTML Structure
• How to Import the SVG Map File
• How to Set Up the div Container for the Map

III. How to Add Interactivity with CSS

IV. How to Add Functionality

• Recap of Steps to Make a Clickable SVG Map
• Final Thoughts and Suggestions for Further Customization

What Is an SVG Map?

SVG maps are vector-based, meaning that the map elements are defined by mathematical equations rather than pixels. This allows you to scale them up or down without losing quality.

What Are the Benefits of an SVG Map?

Some benefits of using SVG maps include:

1. Scalability: SVG maps can be scaled up or down without losing quality, which makes them ideal for use in responsive web design or for printing at different sizes.
2. Customizability: SVG maps can be easily customized to suit specific needs, such as changing colors, adding labels, or modifying the size and shape of map elements.
3. Interactivity: SVG maps can be made interactive through the use of JavaScript and CSS, allowing viewers to hover over or click on specific elements to see more detailed information.
4. Accessibility: SVG maps can be read by assistive technologies such as screen readers, making them more accessible to people with disabilities.
5. Cross-platform compatibility: SVG maps can be displayed on a wide range of devices and browsers, making them a versatile choice for web-based applications.

Example Of SVG Maps In the Wild

Stears and The BBC used SVG Maps to visualize election data. Users can click on a region to see the distribution of ballots cast. See here for more info.

Data visualization of ballots cast in Nigeria

What Are We Building?

In this tutorial, we are building Tour Afrique , an interactive map of Africa.

• Users can hover to see the name of a country.
• Users can click on a country to see more information on Wikipedia.

How to Build Our Interactive Map of Africa

1. Get the SVG Map of Africa

You can create an SVG map using vector graphics software such as Adobe Illustrator or Inkscape, or with code using libraries such as D3.js or Leaflet.

You can also download SVG maps from Wikipedia using a creative-commons license. Click here for the map we’ll use in this tutorial.

2. Create the basic HTML structure

We need a basic HTML structure, which will look like this:

This HTML will give us the following result so far:

3. Import the SVG map file

To import an SVG map file to an HTML document, you can use the , , or tag.

First, open your HTML file in a text editor. Then add the downloaded SVG map to the section where you want it to appear:

Источник

How to Embed a Google Map in HTML

This article was co-authored by wikiHow staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for wikiHow. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.

This article has been viewed 20,141 times.

Having a map of the area you are talking about on your website might be extremely useful. This wikiHow will show you how to embed a Google Map in HTML.

Getting the Google Map Code

Go to the location you want to share at https://www.google.com/maps. This will open a map specifically within Google Maps.

Click Share or embed map . You might see “Link to this map” instead. This option is toward the bottom of the menu. [1] X Research source

Select the size of the map you want. Next to the field of text, you’ll see SMALL, MEDIUM, LARGE, or CUSTOM SIZE. Click the small arrow pointing down to change the map size.

Copy the text provided. You can use the keyboard shortcuts Ctrl + C (Windows) or ⌘ Cmd + C (Mac) to copy the text. On a mobile device, you can long-tap the text for the “Select all” and “Copy” options.

Embedding the Google Map Code

Open your HTML. You could use a program like Dreamweaver or use a simple word-processing app like Notepad and TextEdit in which you edit your HTML file.

Navigate to where you want to embed the Google Map code. In applications like Dreamweaver, you can see what the code translates into on a web page, so you can easily navigate through the HTML code. Without those applications, you will need to know where you are on the web page by looking at the code.

Paste the Google Maps code. You can use keyboard shortcuts by pressing Ctrl + P (Windows) or ⌘ Cmd + P (Mac). On a mobile device, you can long-tap the text field and tap “Paste” when the option appears.

Expert Q&A

Tips

You Might Also Like

When Will a Google Street View Car Come to Your Area?

Find Latitude and Longitude in Google Maps: Mobile & Desktop

2 Easy Ways to Add a Location or Business to Google Maps

How to Track Someone’s Location in Google Maps

Go Back in Time on Google Maps: See Historical Location Pictures

How to Add Your Business to Google Maps

2 Ways to Change the Voice on Google Maps

How to Download a Photo from Google Maps

How to Type GPS Coordinates into Google Maps: Desktop & Mobile

Get Walking Directions on Google Maps: A Complete Guide

Источник