0

enter image description hereI would like to do something pretty standard in HTML/CSS/javascript I think but somehow I didn't find any solution for now: I want to have multiple images on each other with some of them being clickable. For example: submarine with red circle button as window in this case the submarine is one img and the red circle is an input type="image" working as a button.

I want those multiple images to behave "as one" in term of responsivness and scaling so that I still see the same overall image independantly of the size of my window.

If I use this trick here: How do I position one image on top of another in HTML? and make both images responsive then the circle is not scaling down simultanuously with the submarine. Moreover, since the red circle is positioned in an absolute way it is not staying at the same place relative to the submarine.

here is my current code:

    .div{
    position: relative;
    }

    .responsive {
      max-width: 100%;
    }
    
    #test2 {
    width: 12.3%;    
    position:absolute;
    z-index: 2;
    left: 73%;
    top: 62%;
    }
    
    #test
    {
      width: 100%;    
      position:relative;
      z-index: 1;
    }
<div>
      <img src="/submarine.png" id="test" class="responsive" />
      <input type="image" src="/red_circle.png"  id="test2" class="responsive" />
</div>
Flotaz
  • 13
  • 2
  • The accepted answer to the linked question includes code that you could use as an example of what doesn't work. You could even use it as a basis for more attempts and research into the issue. – Heretic Monkey Jan 20 '21 at 20:51
  • Does this answer your question? [How do I position one image on top of another in HTML?](https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) – Hykilpikonna Jan 20 '21 at 21:31
  • no @Hykilpikonna unfortunately this solution does not answer my question. The answer from Manu below did partially. I still have the issue that my Website design is built with cards which are changing sizes depending on the window size but stepwise so not in a continuous resposnive way. Since the red circle is positioned in an absolute way in this card and the submarine in a relative way in the same card as soon as the card changes size the red circle is not positioned correctly anymore. Do you see what I mean? – Flotaz Jan 22 '21 at 20:18

2 Answers2

1

In order to achive that, you can work with percentages, so if you reduce the scale of the window the size of the images reduce as well.

CSS:

.submarine {
  width: 30%;
  height: 55%;
  position: relative;
}

.redDot {
  width: 2%;
  position: absolute;
}

HTML:

<div>
  <img src="submarine.jpg" clas="submarine">
  <img src="redDot.png" class="redDot">
</div>

Then play with the margins in orther to position the red dot in the submarine.

Manu Sampablo
  • 350
  • 5
  • 17
  • Thanks a lot Manu for your fast answer! It brought me a step closer to my goal. The issue I still have is that my Website design is built with cards which are changing sizes depending on the window size but stepwise so not in a continuous resposnive way. Since the red circle is positioned with an `absolute` way in this card and the submarine in a `relative` way in the same card as soon as the card changes size the red circle is not positioned correctly anymore. Do you see what I mean? – Flotaz Jan 22 '21 at 20:14
  • Yes, I understand. The solution i've found it's simple, make relative the parent div (the one that contains the images) and move the images around with properties: `top`, `bottom`, `right` and `left` instead of using `margin`. I can make a snippet if you don't get what I'm saying – Manu Sampablo Jan 23 '21 at 08:41
  • Thanks for your help! I'm one step closer but I still have a weird behavior I think. I tried to describe it as good as possible. I attached a picture to my original post with the different window width of the website relative to the screen width do show you what I mean. I will try to add my current snippet too. – Flotaz Jan 24 '21 at 10:34
  • 1
    ok I think I managed to add the image and my current code as wished. Thanks again for your help! – Flotaz Jan 24 '21 at 10:48
0

Dimensions and positions in percentages relate to the dimensions of the parent element. In your case the window of the submarine should be positioned as a percentage of the submarines dimensions. What you should do to make this is work is to put the window as a child in the submarine. Easiest would be to work with divs with background-images and use background-size: 100% to make the background-images scale with the elements.

Also you could use the "padding-bottom trick" to set the "height" of the div to a percentage of the parent's width.

#submarine {
  background: yellow;
  width: 30%;
  padding-bottom: 20%;
  position: absolute;
  left: 20%;
  top: 20%;
 }
 
 #window{
   position: absolute;
   background: red;
   width: 20%;
   padding-bottom: 20%;
   right: 5%;
   top: 40%;
   background: red;
 }
<div id="submarine">
  <div id="window"></div>
</div>
metatron
  • 896
  • 7
  • 14
  • thnaks for your answer! I tested it but unfortunately I didn't manage to get what I wanted. I'm tried a solution using img area but it's not responsive without the use of a jquery which I want to avoid. No I'm looking for an easy way to create vector polyline in order to have responsive clickable areas. Thanks a lot for your help!!! – Flotaz Jan 29 '21 at 15:25
  • I think svg images would work better, they are build with vectors and scale almost automatically. I made an example here: https://jsfiddle.net/n5tz7vaq/ (svg drawing was made with https://editor.method.ac/). The "submarine" and red dot are in one svg but alternatively you could put them in different html-elements and use the svgs as background-images and use the technique in my answer. Then you could use an input element and use svg as a background (if you really need the input element). But an input element is always kind a rectangular (you can apply border-radius but that's about it). – metatron Feb 01 '21 at 13:40