In GMap Editor V2, you can create an interactive image map online by importing your own image. Check out the above video tutorial or follow the below steps to create your custom image map online: Login to iMapBuilder Online - GMap Editor V2; Select Custom Image Click Choose File to select an image to upload. MapFling: easily share free maps with your own custom markers! MapFling is a free Web 2.0 AJAX online service which lets you: Free Maps Bring up a map of nearly any city or country in the world (a road map, aerial photogaphy, a satellite image, or a hybrid map). From 2013 to 2020, the “Cthulhu manor” demo map shows the evolutions of RPG Map Commercial use. RPG Map II is completely free to use. All the content you create with it can be used any way you want, including in commercial products. Full HTML5 support, Windows version on Itch.io; Roll20 and Fantasy Grounds exports; Import your own. Where CSS image maps stand out is the ability to use a CSS background image sprite to add hover states to our image map. I used another map from wikipedia to create a simple image sprite. As you can see, I created a new image called map.png. I'm going to replace the map-color.png in my ul#continents styles with my new sprite image. Simply define selected areas of your image, set actions and display content for when you roll over these areas. Then use the code generator to generate code to insert your Image Maps into any SharePoint Page! Images contained within a Picture Library will have the option to create an Image Map directly from the image's Context Menu.

Create An HTML Map

HTML image maps are one of the best ways to add multiple links to a single image. HTML maps are fully supported by all browsers. Below you can find a free tool that will allow you to generate an HTML map in the easiest way possible- just draw the areas and give them the links, alts and targets. The system will generate the HTML map code for you. Creating an HTML map is easy! Just follow the steps below.

First, specify the image you would like to map:

Enter your image's URL:

Upload a file: (Coming Soon..)

Drag your mouse to create quares where you'd your links to be, add thier target URL, alt text and taget window. when you're done click the 'Finish' button below:

You're DONE! Copy one of the codes below and paste it in your HTML page:

HTML Map Code

CSS Map Code

Instructionsresponsive Image Map Creator Software

What are HTML Maps?

The HTML <map> tag was created in order to make it easy to set a few links on a single image. Instead of cutting the image into parts and adding an anchor tag (<a>) to each of them – all you have to do is create a <map> tag and connect it with the relevant image on your HTML page.
The HTML map element has only one required attribute: 'name', which is used later for connecting the <map> tag to the right <img> element.

Areas inside an HTML map

The way to specify the links inside an HTML map is to nest <area> tags inside the relevant map.
The <area> tag has a few important attributes:

• shape: sets the shape of the area we want to add the link to. The shape attribute can be on of the following:
  1. 'rect' – For a rectangular link area(most common).
  2. 'circle' – For a circular link area.
  3. 'poly' – For a custom poligonal link area.
• coords: sets the coordinates for the link area.
• href: specifies the URL to link to.
• alt: specifies the alternative text.
• target: specifies the link's target window.

Looking for an attractive website?
Check out Simbla responsive website builder.

How to create an HTML image map?

To create an HTML image map you must specify your areas by thier relative pixel coordinates. This can sometimes be a very excruciating procedure since each area needs at least two (x,y) coordinates - Which means that for 5 areas on your HTML map you'll have to measure at least 10 different points on an image and type them all in. HTML Map offers you this free online tool for easily creating these areas - just drag and drop the link areas and the HTML map creator will automatically generate the entire code including measuring all the coordinates for you.

Check out this cool 3D Rubik's Cube Solver.
Find PokemonGO Friends!

we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a 'tooltip' like popup.

Introduction

In the days of table based web design, using image maps in your web layouts were quite common. They were used to define clickable areas, or 'hotspots', within several sliced images (coming together to form one image). During this time, these hotspots were used mostly for navigational purposes. Today, image maps created in CSS are not only a much leaner and cleaner markup, but they're also easily editable and are often used for displaying additional content when hovered, not just as a means of navigation.

Recreate our image map using CSS

In the table based image map, I used Photoshop to slice my continents map into 17 different images to be used for my 6 hotspots, or clickable links. In our CSS image map, we're only going to use one image.

map-color.png

Apparently Wikipedia didn't want to include Antarctica in the continents map so we'll be working with 6 instead of 7! Oh well, the important lesson here is CSS image maps, not geography.

What we're going to do is create an unordered list and use our map-color.png as its background-image. Fire up your text-editor of choice and create a new html document with the following markup in it:

Image Map Creator

What we have here is a simple unordered list containing our 6 continents and links to their information on wikipedia.org.

Let's add some basic styles to our ul element.

Some basic styles here, nothing special. We removed the list-style, added a background image, declared its width and height to be the same as our background image, and reset the margins and padding. The important declaration to pay attention to here is its position value of relative. This will allow for us to absolutely position our li elements next. You should have something like this.

Now we need to position our li elements according to their size and location on the continents map.

To make it easier for positioning our li elements, I recommend adding a 1px border to each li element, to guide us as a wireframe. We can remove the border when we're done positioning our li elements. Also, because all of our li elements will have this border AND also have a position value of absolute, rather than repeating ourself on each element's declarations, let's add them to all the li elements in our unordered list. Below your ul#continents styles add the following styles:

If you look at the page now, you'll see all of our li elements all bunched up in the left hand corner, overlapping one another. This is because they all have an absolute position, but there aren't any left, top, right, or bottom property values declared yet. We'll do that next.

Right below the ul#continents li styles, add the following styles:

All we did was give each li element its respected height and width values, and also positioned each of them using the left and top properties.

Now if you take a look at our page, you'll see a nice little wireframe of our image map. This is where the borders come in handy for fine tuning the positions. I think it looks good where it is, let's move on!

Right now, our li elements are only 'clickable' within the text area of each anchor element. We want our entire li element to be clickable, so we need to add some styles to our anchor elements. I've highlighted the new styles needed.

First thing we did was declare our display property value as block, instead of its default of inline, allowing for us to give it a height value, in which case we're giving it a value of 100%. We also gave it a negative text-indent value, because we want our text to only exist if CSS is disabled, otherwise we don't want it shown on our image map. Take a look at our page now, and hover over our 'hotspots'. You'll notice now that our hotspots include our entire li element now.

That's it! You can now remove the border values from your li elements and you'll have a simple CSS image map.

Not only is the markup cleaner, and easier to read, but, it's also a lot easier to make modifications to. For instance, if we went in and added Antarctica to the map, we'd simply need to create another li element and position it accordingly.

Add hover states to our map

So far we have demonstrated how to implement a simple image map using CSS, but, from a presentational standpoint, there doesn't seem to be much of a difference between the two image maps (table based vs. CSS). Where CSS image maps stand out is the ability to use a CSS background image sprite to add hover states to our image map.

I used another map from wikipedia to create a simple image sprite.

map.png

As you can see, I created a new image called map.png. I'm going to replace the map-color.png in my ul#continents styles with my new sprite image.

If you were to look at your page with the new background image, you wouldn't see a difference. What we need to do is add background image to our anchor elements, but only when they are hovered. What we're going to do is use the same background image as our ul#continents element on our anchor elements when they are hovered. We'll then need to position the background image according to its position within the sprite.

Let's go ahead and start with North America. At the bottom of your styles, add the following CSS rules:

What we've done is added our background image (map.png) to all of our anchor elements within the continents unordered list. We then declared the background position on our anchor element inside of the li#northamerica. If you take a look at our image map now, you'll see when you hover North America, it has a nice little hover state letting you know you're hovering over North America. If you hover the other continents, you'll see a piece of the the colored version of North America, because we haven't changed their background-positions yet. We'll do that now.

Below the last CSS rules you just put in your styles, go ahead and add the rest of the background position values.

Take a look at our image map now, and you'll see the background positions itself accordingly, when you hover over each continent.

How easy was that?! That's a nice little image map, with minimal markup, done 100% with CSS, and no javascript.

Create a 'tooltip' like pop-up when hovering our continents

By now, you should probably have a pretty good feeling about CSS image maps and how to implement them. What we're going to do now is take it one step further and create a 'tooltip' like pop-up to each of our continents when they are hovered. First thing we need to do is remove the negative text-indent declaration from our anchor elements.

Now when you view your image map, you'll notice that all the country named anchors are visible again. We're going to take care of that now.

In the HTML of our image map, wrap the text content of each of our anchor elements in a <span> tag. So our html in the body should now look like this:

If you look at our image map now, you won't see any changes in our layout. Now, as I said, we only want text to show when we hover over one of our continents. So what we need to do is hide our span elements until our anchor element has been hovered. We will do this by using the display property.

Add the following CSS rules at the bottom of your styles:

What we're telling the browser to do is hide all span elements (display: none) until its parent anchor element is hovered, in which, it will change from display: none to display: block.

Take a look at our image map now and hover each continent. You'll now see the text will only show when its parent anchor element has been hovered. Let's make this thing look better, and add some useful information to the span elements, rather than just the country's name.

Instructionsresponsive Image Map Creator Template

Note: I changed the way my HTML markup looks in the unordered list code for readability, it will not render the page any differently.

Responsive Image Map

What we've done is wrap <strong> tags around our each of our continents' names and added each of their respected population counts.

Now we need to add some styles to our new elements and we're done. First thing we want to do is remove the underline from our anchor elements. Go ahead and find your ul#continents li a rules in your styles and add the highlighted style declaration.

Now we need to add some more rules to our span elements. Add the highlighted styles.

What we're doing here is giving our span elements (when they're parent anchor element is hovered) some styles to make our content look a little better and more like a tooltip.

How To Make Images Responsive

Final Thoughts

Responsive Images Html

That's it! Now, you should have a pretty good understanding of how CSS image maps work. You should be able to take this knowledge and use it into your own projects, or even extend its use by implementing your own ideas.