Plassering av statiske objekter, innad bevegelig bakgrunssbilde

[Debutanten]

Jeg trenger hjelp til å få alle lenker innad det bevegelige bakgrunnsbildet (utført av JS) til å forbli i deres respektfulle posisjoner, uavhengig av hvor brukeren beveger seg.

 

Det hadde vært en ekstra bonus om det gikk an å plassere lenkene/bildene etter de allerede besteme Y og X-kordinatene, istedenfor "left:X" og "Top:Y". Eksempel:

La oss si at jeg vil plassere et bilde over bakgrunnsbildet, som skal forbli statisk, så kan jeg hente informasjon fra f.eks databasen med de eksakte Y og X-kordinatene som bakgrunnsbildet bruker, slik at de lander på eksakt sted.

 

Hadde satt skikkelig stor pris på hjelp!

<script>
$(document).ready(function() {
  var $bg = $('.bg-img'),
    data = $('#datas')[0],
    elbounds = {
      w: parseInt($bg.width()),
      h: parseInt($bg.height())
    },
    bounds = {
      w: 2350 - elbounds.w,
      h: 1750 - elbounds.h
    },
    origin = {
      x: 0,
      y: 0
    },
    start = {
      x: -80,
      y: -100
    },
    movecontinue = false;
  bgSize($bg, function(w, h) { //act on and store the most up and left
    console.log(`image dimensions => width:${w}, height:${h}`);
    $bg.data("mostleft", (elbounds.w * -1) + w);
    $bg.data("mostup", (elbounds.h * -1) + h);
  });


  function move(e) {
    var inbounds = {
        x: false,
        y: false
      },
      offset = {
        x: start.x - (origin.x - e.clientX),
        y: start.y - (origin.y - e.clientY)
      };

    data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

    inbounds.x = offset.x < 0 && (offset.x * -1) < bounds.w;
    inbounds.y = offset.y < 0 && (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
      // ensure that up and left are limited appropriately
      start.x = offset.x < ($bg.data("mostleft") * -1) ? ($bg.data("mostleft") * -1) : offset.x;
      start.y = offset.y < ($bg.data("mostup") * -1) ? ($bg.data("mostup") * -1) : offset.y;

      $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
  }
  
  function zoom(zoomincrement) {
  img_ele = document.getElementById('bg-img');
  var pre_width = img_ele.getBoundingClientRect().width, pre_height = img_ele.getBoundingClientRect().height;
  img_ele.style.width = (pre_width * zoomincrement) + 'px';
  img_ele.style.height = (pre_height * zoomincrement) + 'px';
  img_ele = null;
}

  function handle(e) {
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
      origin.x = e.clientX;
      origin.y = e.clientY;
      movecontinue = true;
      $bg.bind('mousemove', move);
    } else {
      $(document.body).focus();
    }

    e.stopPropagation();
    return false;
  }

  function reset() {
    start = {
      x: 0,
      y: 0
    };
    $(this).css('backgroundPosition', '0 0');
  }

  $bg.bind('mousedown mouseup mouseleave', handle);
  $bg.bind('dblclick', reset);
});
//function to accurately calculate image size.
function bgSize($el, cb) {
  $('<img />')
    .load(function() {
      cb(this.width, this.height);
    })
    .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
}
</script>
<style>
div.bg-img {
  background-image: url(../indes_files/map/Map1.jpg);
  background-position: -100 -80;
  background-repeat: no-repeat;
  background-color: brown;
  border: 1px solid #aaa;
  width: 680px;
  transform: scale(1.1);
  height: 450px;
  margin: 8px auto;
}

p,
#datas {
  text-align: center;
}

#datas {
  background: white;
  font-weight: bold;
  color: white;
  padding: 2px;
  font-size: 1.4em;
  border: 1px solid #ddd;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img">
 ///////// HER KOMMER F.EKS ET BILDE, ELLER EN LENKE, SOM SKAL FORBLI PÅ SITT BESTEMTE STED:
<a href="?corr=h&on=on#main" name="Link" class="Link" map-title="Link" style="-webkit-border-radius:40px;background-color:orange;box-shadow:inset 0 0 20px 1px white;
border:2px solid black;opacity: 0.9;width:50px;height:30px;line-height:20px; position:fixed; left:160px; top:280px">  
         </a> 

</div>

<p>
  <input type="text" id="datas" />
</p>

Endret 3. juni 2019 av Debutanten

[danielhoifodt]

Har du det lagt ut på github eller noe? Så kan folk teste det i browsen... lettere enn å lime inn det der.

 

Syns det er kult du bruker jquery. Skal se litt over koden og se om jeg forstår hva du lager.