I need to select a part of html page and get coordinates of selection, not image - i want to realize this like image cropping (square selection area), how can i do it?
in more detail i want next:
in browser on html page i'm click button, then all page are disabled and become darkgrey color, but small window is showing in real page color, i can manipulate this window: make it larger or smaller - in result i'm need coordinates of this window.
Set up some mouse event handlers on the target element (e.g. the document, a table, etc...)
On mousedown, create a div with a 0,0 size at the point of the click.
On mousemove, resize the div to extend to the new coordinates, using the original x,y from the mousedown event as the origin
On mouseup, do whatever you want with the div coordinates (the "selection") you've just created.
You can use a css class on this overlay div to give it a dashed or dotted border such that it mimics OS selection boxes.
Edit: That just allows you to specify the coordinates of the selection. If you're actually looking to scrape a cropped image of the html page as it is rendered on the user's computer, you'll need some kind of client browser plugin to do that.
This is not possible unless it's a canvas element. You would need a client side addon to render the image for you.
If you just want the coordinates of their selection, you could overlay a transparent element (a canvas, or div) over the whole page. Then use the mousedown and mouseup events to capture the coordinates of the mouse, and optionally draw some sort of transparent square so they know what they're selecting.
I'm not perfectly sure what you want to accomplish, but perhaps you are trying to display only a portion of a larger part of your page.
In that case, I think you are looking for the css overflow property, which can be set to 'hidden', in order to only display a part of for instance a picture.
More information on the overflow property.
Try Firefox's Web Developer Toolbar plugin. It has an option that allows you to view coordinates.
If I understood you well then this is my way:
Just render the page in a <div> (You can put it either directly in html or through <iframe>) then set the some css to the <div> to something like {overflow: hidden; width: 100px; height: 70px}.
To control the offset you need to insert inner <div> and wrap the content of the first one in it, and set the css values to something like {margin-left: -50px; margin-top: -40px;} and you're done.
Related
I have an image follow my mouse cursor (image is set to be directly beneath the cursor). All is well except now I cant really click on anything, because when i click, im just selecting the image and not the elements under it. Is there anyway to ignore the image when it comes to mouse events like click or mousedown?
I dont want to use a custom cursor (cursor: url(...)). Just need the mouse events to propagate to the elements under the image.
Edit:
adding pointer-events: none; sorta works, but disables cursor: none.
Using CSS for the image, you can make clicks pass through it by adding pointer-events: none;.
See Click through a DIV to underlying elements
You can create a fixed html div that follows the mousecursor using javascript. This way you are not limited to only images but also content.
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I am creating a photoboard in which a user can drag-drop photos, resize it, drag it and rotate it. Whenever a user drag-drops a new image on the board a new div element is created and an img tag is appended to the div element. Each div is set to float left so whenever a new image is created it will automatically be placed in its correct position. The jquery-ui plugins (resizable and draggable) are applied to the div.
A problem occurs when the user resizes any image. jquery-ui sets position: absolute and all image positions get distorted. After that, when we add a new image it will be inserted on the previous image. Can anybody please help me to get rid of this problem?
Without seeing your code it is difficult to know exactly what the issue is. I do have some sense of what the problem is. When using drag/resizable, the div will always be position:absolute. What you will need to do in priciple is bind an .mouseup() event to any selected/dragged/dropped div that will .addClass() to the div applying the new position as well as other styles or jQuery dom manipulation. This is the approach I would take. This also allows the freedom to spice up the dropping of the image with some nice animation maybe.
I'm trying to display a background image for a map area when a user hovers over it. Currently I've specified a separate id for each area and I have written a javascript function that triggers when the area is hovered over. To this function I pass the element id and by looking at the console I know that the function is being called with the correct element yet the background is not being displayed! Currently I've only implemented the functionality in the products tag.
I also tried giving the area a z-index of 9999 and fixed width/min-width and height/min-height.
Here is the website https://dl.dropbox.com/u/14863356/OsmosysV3/index.html
NOTE: Just an fyi to others who are facing this problem, Chrome or safari require that you have name attribute declared for map even though it is deprecated.
Why do you even need javascript? In CSS could you not do:
#welcome{
height: 300px; // or whatever
&:hover{
background: url("welcome.jpg")
}
}
Then same for the other elements.
According to this Visible Area Tag image map areas are not visually represented and hence no css is reflected on them. If you want a hover over effect over your maps, then you can find a way to do so by following this link
It's probably not the neatest way to do it, but it works.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.