I would like to know how you can make free movement on the picture on the site. What would paw move around the picture. It is desirable that you could mark up a map of links to the picture.

Closed due to the fact that the essence of the issue is incomprehensible to the participants of ThisMan , meine , freim , 0xdb , Kosta B. May 12 at 3:30 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • what does "move" mean? - ThisMan
  • like in Google maps or pdf document the approximate image of the foot is moved) - KeksChebureks
  • jqueryui.com/draggable probably this is MaximLensky
  • @MaximLensky Yes, thanks! - KeksChebureks

2 answers 2

Vanilla.js + jQuery

Watch full screen

* { margin: 0; padding: 0; box-sizing: border-box; } .item { width: 400px; height: 400px; margin: 30px auto; overflow: hidden; } 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $("#draggable").draggable(); }); </script> <script> var f = function() { function eventHandler(event) { var width = parseInt(window.getComputedStyle(this).width); var height = parseInt(window.getComputedStyle(this).height); var zoom = 40; if (event.wheelDelta > 0) { this.style.width = Math.min(2500, width + zoom) + "px"; this.style.height = Math.min(2500, height + zoom) + "px"; } else { this.style.width = Math.max(500, width - zoom) + "px"; this.style.height = Math.max(500, height - zoom) + "px"; } event.preventDefault(); } var imageElement = document.getElementsByTagName('img')[0]; imageElement.addEventListener('mousewheel', eventHandler, false); }; window.addEventListener('load', f, false); </script> </head> <body> <div class="item"> <img id="draggable" src="https://pbs.twimg.com/profile_images/484669973650874369/8FIN9ovT_400x400.jpeg" alt="" style="width:1000px; height:1000px; transform:translate(-100px,-100px);"> </div>

    Here is a variant with svg + d3.js , d3.zoom() is used here, which essentially handles 2 types of zoom and translate events

     var links = Array(100).fill(0).map(i => Math.random().toString(36).substring(2)) var svg = d3.select("svg"); var image = svg.select("image").on('load', () => { let rect = image.node().getBoundingClientRect(); svg.selectAll("text") .data(links) .enter() .append("text") .html(d => d) .attr("x", d => 50+Math.random()*(rect.width-100)) .attr("y", d => 50+Math.random()*(rect.height-100)) .on('click', function() { alert(d3.select(this).html()); }); }) svg.call(d3.zoom().on("zoom", () => { let t = d3.event.transform; image.attr("transform", t); svg.selectAll("text").attr("transform", t) .attr('font-size', 1/tk*16); })); let resize = () => { svg.attr('width', window.innerWidth) .attr('height', window.innerHeight) }; resize(); d3.select(window).on('resize', resize) 
     body { margin: 0; overflow: hidden; } text { fill: blue; text-decoration: underline; cursor: pointer; text-anchor: middle; dominant-baseline: middle; font-weight:bold; } text:hover { fill:red; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg> <image xlink:href="https://i.imgur.com/RUJONAj.jpg"/> </svg>

    PS: without d3 code will also be very small, but still more =)

    • Just something that is needed, thank you very much! - KeksChebureks