-1

hi so i'm trying to hyperlink parts of an image to different web pages.

The image is a map, so clicking on different sections, should take it to the relevant web page. I would like to use only HTML5 and CSS3.

Any help would be appreciated thanks.

Image link is below.

Floor Plan

Ani Menon
  • 27,209
  • 16
  • 105
  • 126
Abd
  • 25
  • 4
  • 1
    You can use [image maps](http://www.w3schools.com/tags/tag_map.asp) to accomplish this – APAD1 Apr 28 '16 at 15:54
  • 1
    http://www.w3schools.com/tags/tag_area.asp refer that link. –  Apr 28 '16 at 15:58
  • thanks. is there a way to figure out the exact coordinates? i don't really understand it – Abd Apr 28 '16 at 15:58
  • Possible duplicate of [How to make a section of an image a clickable link](http://stackoverflow.com/questions/18560097/how-to-make-a-section-of-an-image-a-clickable-link) – Ani Menon Apr 28 '16 at 16:04
  • As far as I know, you need to figure out the coordinates manually, by using paint or something, with relative to your image position. –  Apr 28 '16 at 16:07

1 Answers1

1

Expanding on my comment above, you can use image maps for this. There are many online image map generators you can use to define the coordinates(such as image-maps.com). Here's an example using the image you provided:

<img src="https://i.stack.imgur.com/9Gecp.jpg" usemap="#linkmap" />

<map name="linkmap">
  <area  alt="board-games" title="Board Games" href="boardgames.html" shape="rect" coords="17,86,188,214" style="outline:none;" target="_self"     />
  <area  alt="lego-models" title="Lego Models" href="lego-models.html" shape="rect" coords="130,256,367,372" style="outline:none;" target="_self"     />
  <area  alt="playing-cards" title="Playing Cards" href="playing-cards.html" shape="rect" coords="261,110,377,197" style="outline:none;" target="_self"     />
</map>
APAD1
  • 13,509
  • 8
  • 43
  • 72