I am trying to find a way to drag and reposition an image that is below another (larger) image. So basically I want to make the top image completely ignored by the framework. I have tried making it non-draggable, but it still covers up the bottom image and prevents me from resizing it. Anyone had luck with this?
If both images are in the same layer, then you can change the z-index and move the image to the front on click. ( .moveToTop())
If not, then you have to change the z-index of the layer on click, so that the larger image does not cover the smaller.
Related
I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas
I am currently working on an app with a friend and we need to make it so that an image will fall when the image below it disappears. So it needs to like take the images place when it disappears. Any ideas on how to do this?
jQuery would be a good starting point for this. Presumably you're hiding the image with JavaScript to begin with, so add code to the same function that loops through all of the images above it and moves them down to fill the gap (possibly using .animate()).
Are you sure you want to move the images down, though? That will leave an odd blank space at the top of the screen, where there's no image left to fall from above. Images "falling" upwards when the image above them vanishes would make more sense on most HTML pages.
I am trying to create an image map, where I define on the images coordinates that are links to the some other pages. Now the problem I am facing is that the position of coordinates is not relative.
If the image is on a different browser or in a different screen size, then the coordinates are not preserved. I mean a link which was at a particular place in the image is now on some other place of image.
Can anyone provide a piece of code where I can have some relative positioning where even the browser size or the image size will change the coordinates position also with it.
I tried to user percentage tags like COORDSCALE "50%,50%" but it seems like a wrong attribute for the Area tag. Even this COORDSCALE="ABSOLUTE|RELATIVE" is also not working.
First of all, are these the right attributes? Is there a possibility of relative positioning? Any CSS, or Javascript code will be great.
Wrap the image with div that has relative position. Inside it use absolutely positioned elements to imitate the same thing imagemap is supposed to do.
Google "CSS image map" to find more information about the technique.
I'm displaying a background picture with some semi-opaque div over it, so that it appears somewhat darker than it actually is. On top if it, I have a number of smaller, draggable divs.
I'd like the image to be completely visible, or revealed under these divs. These smaller divs should be like looking through windows to the below image.
One way to do it, is to set the background of each "window div" be a version of the larger image, and adjust the position to compensate for the div location. This works okay, but is kind of slow/jerky and very clunky.
Is there a better way?
Thanks!
Here's a canvas app I come across : canvasphoto (uses YUI 2 I believe, which I haven't used before). It displays images on a canvas and it lets you resize/move the images across the canvas. What I want to do is to add a close button on the top right side of the images drawn on the canvas and have it trigger an onclick event when clicked (I'd display a confirm button asking the user if he/she wants to remove the image).
Is this possible? If so, can you help me get started on this (resource/link for drawing an image on top of another image drawn on a canvas, basic canvas manipulation, etc.) Thanks!
Edit: solved the part where the image rendered will respond to click (on top right corner only). So, the only problem left is drawing the close button on the top right corner of the image.
There is no way for something drawn into a canvas to respond to events without additional work. Either you can store the position of the close box and have an onclick event on the canvas check if the click occurs within the rectangle, or you could place an element over the canvas where the rectangle has been drawn and use that to handle the click. A relatively positioned div with no contents would work.
Instead of drawing on the corkboard, a div with an image is rendered on the page above the top right corner of the image by setting a higher z-index than the canvas and and absolute position (with the coordinates of the top right corner, of course).