Jump to content
Sign in to follow this  
Debutanten

Plassering av statiske objekter, innad bevegelig bakgrunssbilde

Recommended Posts

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>
Edited by Debutanten

Share this post


Link to post

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.

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...