I'm making a browser game, it's based around a world which you can build on, essentially I have a little user window with a box in, where the world/map is.
Basicly this map is so big so you need to be able to pan it, like click and drag inside the box to move the "map". (The map is essentially a big image)
Now there's a problem with images and dragging. When I click and drag on an image it assumes I want to "copy" it or drag it somewhere.
I tried to replace it with a normal div and it works so the code is fine. And I don't want to place the image as a background image either.
So my question is, how do I "disable" the "drag picture somewhere" feature? Whenever I try to click and drag on a picture, on any website, my cursor changes to a "no" sign, it means that I can't drop it there and if I'd move it into lets say photoshop, it'll change to this "drop pic here" cursor.
EDIT
Sorry for me not researching, I found out that you can do;
[element].ondragstart = function() { return false; };
You could use
[element].ondragstart = function() { return false; };
as you suggested, or I also think you could solve this by absolutely positioning another div on top of the image, just as a "control layer". That way you could write js that responds to mouse interactions in that div without worrying about the image at all.
Related
I have one main image, composited from other images overlapped with z-index. Lets say we have a bathroom, and i have separate images for the floor, for the walls, for the lights, etc. And I build the hole space with z-indexing all of the small parts/images.
I want to detect when my mouse pointer is over a different part of the image, and to alert its name. For example when i'm pointing the floor, script says -> It's the floor.
I try different approaches but no luck at all. There is always some big element that can not be hidden very well with z-index, and its transparent background crosses the other elements, as well as it takes their hover events.
$("#floor").attr('title', 'This is the hover-over text for the floor');
$("#floor").on('hover', function () {
console.log('this is the floor!');
});
That's what i use for now -> floor is the id of my DIV IMG element holding the floor image.
This don't works well, because of edges of objects in images, and really i can't cut the images that good or i have triangles and rectangles which goes into another objects/image.
I try something with using canvas, but again i don't like the result, because canvas is wrapping everything in one big window, and can't manipulate each part of the image.
Can some one give me an advice what can i try, or what to use to do this.
See picture:
green is working fine, i get the right hover text, but red is wrong, because it tells me that i'm on WC, and i'm not.. i'm outside of the object and i'm on the floor.That's because it detects the transparent background of WC image.I want to find the exact size of each element. If this can help as example.
I think you can you Raphael Javascript Library for this: http://dmitrybaranovskiy.github.io/raphael/
I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.
I'm working on a web app that's available for testing on:
"http://83.150.87.220/dropbox/HelsinkiViSeZip/Jatkasaari"
It is used (mainly) to zoom in on an image and pan that same image.
Once the document loads and the central image becomes visible, you can mousedown + drag to either zoom in/out on that image or pan it.
When pressing the mouse button down, you'll notice that the image turns blurry and that an indicator (png image) appears just under the cursor. That indicator shows you how to move the cursor in order to select an action (zoom/pan).
Everything works just fine in Chrome, but in FF, once you mousedown for the second time on the image and start dragging the cursor, it seems that the indicator (the png image I mentioned earlier) drags along and messes everything up. This seems to be pretty much the default behavior for clicking-dragging images in any browser. But it's very weird, since on the first mousedown+cursor drag combination, everything works just fine. And not to mention that I made sure to prevent the default action for images:
$(document).on('mousedown dragstart', 'img, a.icon', function(event) {
event.preventDefault();
});
I'm all dried up in terms of ideas on how to find the problem, so I'm going out of my mind...Can anyone help?
Thanks in advance!
You could try setting it as a background image inside of a div container or something similar and just show/hide that instead of using an img element. That way you won't be able to actually "select" the image with the cursor but everything should still work if it's driven by javascript.
I was facing a similar problem and it seems that it need to also return false; to prevent the browser default behavior.
Here is the fiddle
I have a textbox, a div, and an image.
Do we have any way to do like this:
When I drag that image into the div. (The image don't need to move, just like we left click on it, and drag it to anywhere, but it never move.)
The div show the image. (Duplicated 1 image into the div)
The text show URL of that image.
Do you have any idea or article(s) on doing this thing?
I've never coded drag drop in my life, but I know Step 2 is just set HTML for the div, and Step 3 is just get image src. However, on Step 1, how do I know when "the image into the div and the mouse release?"
I know jQuery UI, it's not the dragable from jQuery UI, cause the draggable makes object move. I don't want it move. Can you try click on any image on this stackoverflow website, or any link. Then you hold your mouse and drag it. Try drag a link into the search box at top, and you get the link. Thats what I want. Not the dragable of jQuery UI to make the object move.
You can do all of this with the dragable feature in jQuery. I noticed in a comment you mentioned that you don't believe this will work because it actually moves the image but there are more than just the default options! Take a look at the clone helper attribute.
Here's about as close of an example as there is and it sounds like you already know how to handle the rest (getting the src attribute, etc.).
http://jqueryui.com/demos/droppable/#method-option
JQuery draggable allows you to leave the original in its place while dragging through the use of Helpers. See this url and try dragging the top grey boxes around. The two on the right use helpers, leaving the original in place.
http://www.jqueryui.com/demos/draggable/#visual-feedback
Using this in conjuntion with the link Artsemis provided will do the trick
Dragging an image into your address bar is a function of the web browser, not JS or the page you are viewing. You will want to use jquery draggable or something like it.
I have searched a lot but i could not find any proper solution for my requirement.
I want a functionalty in my website where user can select any area on browser or anywhere in desktop and convert the selected area into image.
I know this can be done in windows form,there you do have options to track mouse movements and capture image from screen.
I know if i wan this functionality in web i have to get cordinates via javascript and hen maybe make an ajax request to webservice and get my image.
first of all i cannot find a proper way in javascript that will get me mousedown and mouseup coordinates.
I have seen jquery 's Dragable and resizable div.I want something lke that for user to select the area which has to be converted to image.
I can even get Origal mouse position,Current mouse position and the size of div using jquery dragable and reszable div.
and Second i want some advice as to how i should grab the selected area as image.
Kindly help me out.
Not possible with JavaScript. Web pages are (intentionally!) not capable of tracking mouse movements outside the browser window, nor of reading an image off the user's desktop.
You mean something similar to: http://www.screenr.com/record ?
You can use the clientX and clientY of an event to get the mouse coordinates. For example:
http://jsfiddle.net/yN3S5/1/
HTML:
<p id="x" ></p>
<p id="y" ></p>
Javascript:
document.onmousemove=function(e){
x=document.getElementById('x');
y=document.getElementById('y');
x.innerHTML=e.clientX;
y.innerHTML=e.clientY;
}
First, to convert your page to image, there is a very cool library that can do that. Its use the canvas, and render on it the full page by reading it
Get the code and see the examples from here.
http://html2canvas.hertzen.com/
Once you have the page in canvas you can thn conver it to png and get a part of it by selecte it.
See this example ! http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html
Click on the send feedback, then select an area on the page, then click on preview ! Its very near for what you ask, but instead make a red rectangle you cut this part of the image.
more examples like the last one : http://hertzen.com/experiments/jsfeedback/
Forget to capture anything outside the browser.