CODEWITHSUNDEEP
javascripthtmlcssfrontendposition
III_phr
III_phr

Reputation: 96

Relative image map

So hello everyone.
I was trying to put an image on a webpage and make part of it clickable.
I've found this site and it was pretty handy. Then I added a little jquery and made those parts a button, etc.
But the problem is that I want this image to display correctly in different sizes and ratios of monitors.
This site's coordinates were absolute, and you know that this is not a good thing for making a page responsive.
Is there any way to make those coordinates relative somehow? (I believe this is not most likely the solution)
Or is there any other approach to make part of an image clickable and keep the page with the image responsive?
Thanks a lot :)

Upvotes: 0

Views: 803

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105903

here is a simple example instead the pen i linked earlier, using scale(), margin and mediaqueries to reset their values.

Since transform has no effect on the original size and space used by the the transformed element, if you rescale it, the room it uses does not. margin can go over it, increase margin around it while scaling up to push things away, and decrease margin with negative value while scaling down to pull things around it.

img {
  border: solid;
  display: block;
  margin: auto;
}

@media screen and (min-width:250px) {
  img {
    transform: scale(0.5);
    margin: -75px -125px;
  }
}

@media screen and (min-width:500px) {
  img {
    transform: scale(0.8);
    margin: -30px -50px;
  }
}

@media screen and (min-width:800px) {
  img {
    transform: scale(1.5);
    margin: 75px 125px;
  }
}

@media screen and (min-width:1200px) {
  img {
    transform: scale(2);
    margin: 150px -250px;
  }
}

map {/* for the demo, wrap it and use a div to avoid funny behaviors */
  display: grid;
  justify-content: center;
}
<map name="map_example">
  <area shape="rect" coords="98,60,375,220" href="#sunny" alt="Sun">
  <img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw"    alt="image map example" width='500' height='300' usemap="#map_example">  
</map>

If you need to add visible element over your image , you can use grid (or absolute positionning) and map becomes unnecessary (areas are not meant to be shown by browsers) . The method is the same reset margin while rescaling.

* {
  margin: 0;
  box-sizing: border-box;
}

div {
  display: grid;
  justify-content: center;
  width: 500px;
  height: 300px;
}

a,
img {
  grid-row: 1;
  grid-column: 1;
  border: solid;
}

a {
  width: 280px;
  height: 160px;
  margin: 60px 0 0 97px;
  background: linear-gradient(to bottom left, rgba(100, 200, 50, 0.5), gray, rgba(255, 125, 0, 05));
  /*chrome*/ position:relative;
}

a:hover {
  background: none;
}

@media screen and (min-width:250px) {
  div {
    transform: scale(0.5);
    margin: -75px -125px;
  }
}

@media screen and (min-width:500px) {
  div {
    transform: scale(0.8);
    margin: -30px -50px;
  }
}

@media screen and (min-width:800px) {
  div {
    transform: scale(1.5);
    margin: 75px 125px;
  }
}

@media screen and (min-width:1200px) {
  div {
    transform: scale(2);
    margin: 150px 250px;
  }
}
<div>
  <img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw" alt="image map example"
    width='500' height='300' usemap >
  <a href="#sunny"> green rectangle</a>
</div>

You can remove the usemap attribute. I left here for the image and added a border that becomes blue like a link. Looks like it is expected that this image is a link to elsewhere for firefox :).

Upvotes: 2

Related Questions