on click of part of image redirect to many urls

Question

I use PHP and I am trying to have a redirect on click of part of an image. I will have one image and if I click on a part of this image I will redirect the user to the new URL.

Something like this image:

If one of these icons is clicked I must redirect to a page with products. I can not use google maps, the client wants it to be an image ...

Maybe be with jquery? Can anyone please guide me.

Possible duplicate of [1 image 2 links](https://stackoverflow.com/questions/4305109/1-image-2-links) — Martin M, May 07 '19 at 08:53
Well yes, you can use jquery. But you can also look at `` HTML element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map — Mihai T, May 07 '19 at 08:54

score 5 · Accepted Answer · answered May 07 '19 at 08:55

5

You could use a good old image map: https://www.w3schools.com/tags/tag_map.asp

And use a generator to make it: https://www.image-map.net/

answered May 07 '19 at 08:55

Svela

629
5
7

score 1 · Answer 2 · answered May 07 '19 at 08:56

1

You need to set pin icons separately from the image. After that you need to set respective links on respective icons.

answered May 07 '19 at 08:56

Rahul

21
2

score 1 · Answer 3 · answered May 07 '19 at 09:02

Simply use CSS. Have the image as a background of a relatively positioned parent, then use absolutely positioned children

SASS

ul {
  background: transparent url(https://i.stack.imgur.com/HEzZR.png) center center;
  height: 300px;
  position: relative;
  li {
    position: absolute;
    list-style: none;
    &:nth-child(1){top:10px; left:50px;}
    &:nth-child(2){top:100px; left:33px;}
    &:nth-child(3){top:60px; left:290px;}
    a {
      display: inline-block;
      height: 30px;
      width: 20px;
      text-indent: -9999px;
      background-color:red;
    }
  }
}

See this example - https://jsfiddle.net/tgd7wn6k/

on click of part of image redirect to many urls

3 Answers3