Css with image map

: The Image Map element

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

map name="primary"> area shape="circle" coords="75,75,75" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" alt="JavaScript" /> area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" alt="CSS" /> map> img usemap="#primary" src="parrots.jpg" alt="350 x 150 picture of two parrots" /> 

Result

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Any transparent element.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLMapElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML Image Maps

With HTML image maps, you can create clickable areas on an image.

Image Maps

The HTML tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Example

Here is the HTML source code for the image map above:

How Does it Work?

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Tip: You can use any image as an image map!

Create Image Map

The element is used to create an image map, and is linked to the image by using the required name attribute:

The name attribute must have the same value as the ‘s usemap attribute .

The Areas

Then, add the clickable areas.

A clickable area is defined using an element.

Shape

You must define the shape of the clickable area, and you can choose one of these values:

• rect — defines a rectangular region
• circle — defines a circular region
• poly — defines a polygonal region
• default — defines the entire region

You must also define some coordinates to be able to place the clickable area onto the image.

Shape=»rect»

The coordinates for shape=»rect» come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example

This is the area that becomes clickable and will send the user to the page «computer.htm»:

Shape=»circle»

To add a circle area, first locate the coordinates of the center of the circle:

Then specify the radius of the circle:

Now you have enough data to create a clickable circular area:

Example

This is the area that becomes clickable and will send the user to the page «coffee.htm»:

Shape=»poly»

The shape=»poly» contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example

This is the area that becomes clickable and will send the user to the page «croissant.htm»:

Image Map and JavaScript

A clickable area can also trigger a JavaScript function.

Add a click event to the element to execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

Chapter Summary

• Use the HTML element to define an image map
• Use the HTML element to define the clickable areas in the image map
• Use the HTML usemap attribute of the element to point to an image map

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

How to add image map in css?

Question: I have a question regarding image map. Now I have a image on my .xhtml page which uses image map somewhat like this is there a way I can add the map name contents in css?

How to add image map in css?

I have a question regarding image map. Now I have a image on my .xhtml page which uses image map somewhat like this

is there a way I can add the map name contents in css? is it possible?

ImageMaps are a holdover from a bygone era. Html 5 canvas stuff is the way to go if you can push that envelope. If you can’t, what we have done in the past is layered absolutely positioned, block-displayed blank anchor tags over an image. Works as well or better than an image map, especially if you are using it for stuff like popups on a map.

CSS Sprites and Image Mapping, So you’re trying to get CSS sprites — background images with adjustable background positions — working with html

Create a CSS Alternative to an Image Map

to create an alternative image map.Demo file: http://www.sixminutessmarter.com
Duration: 6:22

How to make an Image map in HTML

In this HTML tutorial we understand HTML map tag, HTML area tag and its attributes. We Duration: 10:20

How To Create a Clickable Image Map in HTML

Hyperlink map on image with css

this is a picture of desk with several elements, I’m trying to find a way to make parts of image interactive.

example — click on monitor, directs you to desired link. speaker — different link

The problem is that the solution must be in CSS and HTML with no use of JavaScript or anything else.

So far I found only some sites for making interactive svg maps.

but I would like to use shapes that are exactly same as speaker, monitor etc. not just rectangle.

You can use shape poly that come from Polygon.

Polygon

This expects as many pairs of coordinates as you need to make your polygon. These can make any polygon shapes you need, and can have sloping lines. All coordinates are specified as horizontal position then vertical position, with all of them in a long comma separated list. The last pair of coordinates can optionally match the first. An example would be:

shape="poly" coords="217,305,218,306,218,306,228,316,243,316,243,325,229,325,229,322,217,310" 

There are several imagemaps generator tools online that can do that for you.

You can use map generator tool to get coords for each poly easy and fast. I have tried this Imagemap-generator. All you need is just drawing the areas you need to link (as I did here: https://gyazo.com/7ddba6578cd1ebfe4f31088d40f1cf06 ) and get the code at the end.

E.g. for speaker the code will be

Add an HTML Marker to map, This article shows you how to add a custom HTML such as an image file to the map as an HTML Marker. Note. HTML Markers do not connect to

: The Image Map element

The HTML element is used with elements to define an image map (a clickable link area).

Attributes

This element includes the global attributes.

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be equal to the value of the name attribute of another element in the same document. If the id attribute is also specified, both attributes must have the same value.

Examples

Image map with two areas

Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

 map name="primary"> area shape="circle" coords="75,75,75" href="https://developer.mozilla.org/docs/Web/JavaScript" target="_blank" > area shape="circle" coords="275,75,75" href="https://developer.mozilla.org/docs/Web/CSS" target="_blank" > map> img usemap="#primary" src="parrots.jpg" alt="350 x 150 pic"> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

HTML — How do I interacting with each individual image when they are overlaid on each other?

I built a map in Photoshop where each layer is a piece of the map. When they come together they make the whole map.

What I want to do, is have an interactive map on my website where each piece of the map is a button. However, when I export them as PNG’s (with transparent background) and overlay them in HTML I can only interact with the top most image. Does anyone have a suggestion for another way I can do this?

.parent < position: relative; top: 0; left: 0; >.image1 < position: relative; top: 0; left: 0; width: 75%; >.image2 < position: absolute; top: 0; left: 0; width: 75%; >.image2:hover < transform: scale(1.5); >.image1:hover

For starters I would use the images as SVG file format and not png file format the SVG:s gives you more possibilities in what you want to achieve.

From what I understood you want alot of different images to form one big image, then I would change the sizing and positioning in the HTML of each image so that it aligns as you want it and does not cover each other in order to form the bigger image.

HTML image maps with non-pixel, relative units (em, etc.), Not really sure image maps are used anymore. You can basically get the same thing done with an anchor and some css. · 1. @ChristopherMarshall you

Источник