Drag over a background image - javascript

I am trying to develop a map for a game.
The whole map is a single image that is 6000px x 6000px. The map is shown as a background of a div (container) that is 6000px x 6000px as well.
My question is what is the easiest way to make my map draggable, so you can click in the middle of the screen and just drag to the sides.
The map itself (the div container) shouldn't change position as I plan to populate it with POI.
I don't need any funcy staff, like zoom etc, just that the user doesn't need to use sliders in the webpage to navigate, just to click on map and drag left/right/up/down to move.
Sorry if this is answered before, I couldn't find an answer.

Here is a minimal example, which allows dragging an image inside a div
<div id="container">
<img id="draggable" src="http://lorempixel.com/800/800" />
</div>
#container {
width: 400px;
height: 400px;
overflow: hidden;
}
$('#draggable').draggable();
See full JSFiddle

Related

How can I click on a link which opens an image, then only display part of that image

I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>

How to scroll a large image inside a smaller div using mouse click and drag?

I want to place a large image inside a div and let the user scroll through the image using the mouse (click and drag to the desired direction). How can this effect be achieved?
CSS:
#image{
position: relative;
margin: 0 auto;
width: 600px;
height: 400px;
top: 300px;
background: url("http://www.treasurebeachhotel.com/images/property_assets/treasure/page-bg.jpg") no-repeat;
}
HTML:
<div id="image"></div>
EDIT:
I want to implement this myself in order to gain knowledge, 3rd party frameworks are last resort.
<html>
<body>
<div style="width:200;height:200;overflow:scroll;">
<img src="/home/james/Pictures/scone_ontology.png" />
</div>
</body>
</html>
Check out jQuery UI Draggable. The first example sounds like exactly what you are trying to do:
https://jqueryui.com/draggable/
So you just want 600w 400h div, with a "map" inside that you can scroll around and look at with the mouse? You're very close already.
Have a div with the size you want the end-product to take up. Make sure you set its css to overflow:scroll;. Then put your image inside this div. Your image can ofcourse also be the background-image of a div.
And that's it.
A cool trick would be to wrapp all this up in a div that is slightly smaller, with overflow:hidden. Just small enough to hide ugly scrollbars. But that might be bad usability.

Create Map sample that clicks into the actual map

I am trying to build something that prevents users from clicking on the interactive aspects of the map until they click the map initially like shown when you google search a place like the Toronto Eaten Centre.
I did a visual mock to better explain:
I am using google maps and I am not able to get a div to float over the google maps (which was my first attempt at creating this by just having a div float over that when clicked on would disappear and the map would resize via javascript). Google does this well when you search for a location example found here.
Here is my fiddle trying to float a div over top so that i could use it to click into the actual map.
Below is the css of the floating div that will not show above the map even with absolute position and z-indexes
.map-floater {
position: absolute;
z-index: 3;
height: 280px;
width: 100%;
background: #555;
opacity: 0.7;
}
Your markup isn't right, put the overlay in same container as the map
<div class = "map-holder">
<div class = "map-floater"> </div>
<iframe src="path/to/map" width= "100%" height = "380px" frameborder="0"/>
</div>
DEMO

Is it possible to get an adjustable "view" of a static image in HTML?

I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.

How to place a mouse under a div (with jQuery)?

Ok so let me explain. Lets say there is a small image and when you hover over it, there will be a new and much larger image (an enlarge version of the image). Thats easy, but wait! I want the larger image to be right on top of the smaller image and when you hover out of the smaller image, the div goes away. The problem is that when you display the larger image on top of the smaller image, the mouse is hovering over the larger image and not the smaller image. I want to make it so that the mouse stays hovering on the small image while having the larger image on top if it. And when you hover out of the smaller image the larger image disappears. The key is having the larger image on top of the smaller one (covering it up), but having the mouse under the larger image. Cant figure this out! Thanks guys
No, the mouse is always on top. But, you can accomplish the functionality you want - to hide the larger image when the mouse leaves the smaller image. There's more than one way to do it, for sure. Here's the approach I'd take.
HTML:
<div class="imgHover"></div> <!-- This div is the element that is hovered -->
<img class="large" src="largerImg.jpg" />
<img class="small" src="smallerImg.jpg" />
CSS:
.small, .imgHover
{
height: 55px; /* Set the div's size to match the smaller image */
width: 80px;
}
.imgHover, .large
{
position: absolute;
}
.large
{
display: none;
z-index: 2;
}
.imgHover:hover + .large /* this bit is the important part */
{
display: block;
}
.imgHover
{
z-index: 3;
}
If you want to do it with JavaScript instead of pure CSS, that's ok. Set it up with the same css, but use div.imgHover to attach your mouse events.
The solution would be to handle hover on the larger image but in the handler have the larger image go away when the pointer's x and y positions leave the boundaries of the smaller image.
Sounds like your problem is because with the .hover() because you have the new div opening over the old one it causes the .hover() to fire the mouseOut function. The best solution is to add to the .hover() so the mouseEnter also includes the larger image that "grows" out of the smaller image.
something like
$("#small_image, #large_image").hover(function (){...},function() {...});

Categories

Resources