0

I want to be able to place four points on an image I upload. I have this so far to let me plot one point, is there a way to plot four separate points?

<img src="null.png" id="marker" style="position: absolute;" /> 


<script> 
    $('#marker')
       .css('left', e.pageX)
       .css('top', e.pageY)
       .show();
   </script>
Kakul Sarma
  • 303
  • 1
  • 4
  • 21
P Lau
  • 1
  • 3
  • Where is the code that places the points? The `img` with `id="marker"` is only the image. Do you have a different `div` that defines the "markers" you're talking about? – Thomas Darvik May 07 '18 at 11:28
  • Place four points? You are setting the css-properties left and top in that code. – Esko May 07 '18 at 11:29
  • Oh I forgot to put the click function in the question. Changed the id="marker" to a div now. – P Lau May 07 '18 at 11:43

1 Answers1

1

If you would like to add one point on each corner, a simple way to do this would be to wrap your img with a div container, make its' position relative (so that all its' children will be positioned relative to it) and then add four elements where each can be positioned however you like. You may achieve this without javascript:

HTML

<div class="img-wrapper">
    <img src="null.png" id="marker" />
    <span class="img-corner top-left"></span>
    <span class="img-corner top-right"></span>
    <span class="img-corner bottom-left"></span>
    <span class="img-corner bottom-right"></span>
</div>

CSS

.img-wrapper {
    position: relative;
    display: inline-block;
}

.img-corner {
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 3px;
}

.top-left: {
    left: 0;
    top: 0;
}

.top-right: {
    right: 0;
    top: 0;
}

.bottom-left: {
    left: 0;
    bottom: 0;
}

.bottom-right: {
    right: 0;
    bottom: 0;
}

You may also change the position of each point to be anywhere you'd like.

Shahar
  • 2,269
  • 1
  • 27
  • 34
  • 1
    This is the correct solution for OP's question, however, I think OP does not know what he is actually asking for. – Thomas Darvik May 07 '18 at 11:41
  • Hi thanks, however I don't actually want to plot corners necessarily. So I want to upload an image, plot four points using mouse click to plot new corners to eventually be able to transform the perspective. I have the code to upload and transform however can't plot the four corners I want. To perform something like [this](https://stackoverflow.com/questions/33470757/how-to-fix-image-perspective-distortion-and-rotation-with-javascript). – P Lau May 07 '18 at 11:46
  • @PLau in that case, you will need to write code that responds to mouse click events and set the position of each point to it's correct position on the image. The code example provided here should be a good enough static example to show that you can place points everywhere you want relative to the image. You may also use percents instead of pixels. – Shahar May 07 '18 at 11:49