Placing pointers top and left edge with responsive design

[Janjvr]

I am building a template where I load a image and place pointer images on top. All works well, except when scaling the page the position of the pointers does not adjust accordingly. I load the positions from a array and use left and top styling. The image scale perfect. Are there any way I can position pointers according to image size rather than viewport width and height? Not very keen on setting new positions with media Queries. Below is just some excerpt from function. As you can see I am running through loop etc.

Thanks for any help with this.

var markers = [
[ 24.5,-39],
];

Myimg.style.left = markers[i][0]+”vw”;
Myimg.style.top = markers[i][1]+”vh”;

[Shikkediel]

As you can see I am running through loop etc.

I don’t really see myself… sharing more code would be helpful. And what do you mean by “pointer image” exactly? To me that’s an alternative cursor.

[Janjvr]

Hi, thanks for answer. Maybe pointer is not the correct word. I am placing dynamically created images on top of a main images. The purpose of this is to point to different areas of the images. E-learning content of technical drawing to make reference in text. Therefore “pointer”, not cursor.

The rest of the code is not relevant to my issue. I load a image in div tag, run through loop to pull data from array nodes. Then run JavaScript to generate images to be placed on top of main image according to the array. In the code provided I just simplified all as not to make it too confusing with unnecessary code.

for (i = 0; i < markers.length; i++) { 

     (function(i){

         var Myimg = document.createElement('img');
         Myimg.setAttribute('id','img'+i);
         Myimg.src = 'images/markerNormal.png';
         Myimg.style.position = "absolute";
         Myimg.style.left = markers[i][1]+"vw";
         Myimg.style.top = markers[i][2]+"vh";
         document.getElementById("imageHolder").appendChild(Myimg);
          var btn = document.getElementById('img'+i);

          var markerImage = markers[i][3];
          var markerText = markers[i][0];
          var footnote = markers[i][4];
           btn.addEventListener('mouseover', function()  {getClickFunction(markerImage,markerText,footnote);}, false);
         })(i,this)
     }

[Author]

Posts