Should i use image maps

Your navigation is not something that should be taken lightly when creating your blog structure. It is probably one of the most important aspects of your site, so care should be taken when you build it. You want your blog to be easy to use, to work on all browsers, and to benefit your SEO. Text links and list items are always an option and can be styled with a little CSS. Otherwise, slicing up your base image that you would have used for your image map and creating individual image links for each link item would be your next best bet.

A while back, I created a tutorial about how to create a header image with navigation links in Blogger. I recommend reading it to get the basic idea of how to cut up your image and put it back together with links included. Skip to content. Our website is supported by our users. We sometimes earn affiliate links when you click through the affiliate links on our website.

What Are Image Maps For? Image maps are for linking particular areas of an image to a certain source. They are tricky and take time to implement. If you have no experience with them you have a high chance of implementing them improperly. Search engines are clueless. This is because the area coordinates are tied to the original size and scale of the image. Those will need to be defined between the opening and closing map tags.

This name is what is used to overlay the map on the image. Take another look up at the image code in Step 1. Notice the usemap attributed followed by the name of the map. This is how the map is tied to the image. We need to create two shapes to overlay over the image: a polygon shape over the screen of the phone, and a second polygon that approximately covers the Scrabble letters. Using an application like Microsoft Paint with the rulers visible, we can see that the four corners of the phone screen fall at the following pixel coordinates:.

We can create that shape, or area , in an HTML map by using the following code:. Using the same process described above, we can also create the shape over the letters by using the following code:. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.

If you must use image maps, you may want to look into Matt Stow's jQuery plugin. Alternatively, Dudley Storey demonstrates a way to use SVG for an image map effect, along with a subsequent combined SVG-raster hack for bitmap images.

Here we go over how to set up an image map, and some downsides to consider first. Prerequisites: You should already know how to create a basic HTML document and how to add accessible images to a webpage. Objective: Learn how to make different regions of one image link to different pages. Not just any image is acceptable. The image must make it clear what happens when people follow image links.