Have visitor be able to slide an image around the screen

JavaScript
1

I don’t know if JavaScript is the right category.
I expect to show a button that links to a new html page.
The page will show an overlay of text in the upper left corner, which are easter eggs for the image.
Below that is the image containing the easter eggs filling the browser window.

I’d like the visitor to be able to shift the image around so they can look for the easter eggs listed. The image will be larger than the broswers window in most cases (3000px wide). Some of the detail is small, that’s why the image is so large. Of course, this is only for desktop, and will be used on an internal server network.

I believe browsers default to fitting an oversized image in the window and fixing it in place. How do I implement the shifting feature?

2

I found an answer I can try:

3

No, this doesn’t work. Object can be dragged only by dragging the very top. If you release it above the browser window and let go, it can’t be moved any more, leaving the lower half of the image yet to be explored.

I thought there was a draggable method using CSS, where you can drag an item into a box as though buying it.

4

I hacked the link above code and made it work.

The site uses this:

<div id="mydiv">
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>

I moved the first < /div> to just before the last < /div> to enclose everything inside the outer div:

<div id="mydiv">
	<div id="mydivheader">
		<img src="image.jpg">
	</div>
</div>

And now I can drag the image itself instead of only a handle.

2 Likes