I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
Related
I am making a page on my mobile app that can crop images.
What I'd like to do is have a div overlayed on top of my image. This div will have a box within it, and that box should be transparent so that you can see the part of the image you want to keep. Outside the box, I want the image to be shaded.
This image below is an example of what I want to do, except instead of the fancy border I can just have a regular border.
Is this possible with css or javascript?
(Ps I know the below is a software program, but just imagine the picture is html and that's what i'm trying to accomplish)
Your best bet is to prob use 4 divs with an rgba(0,0,0,.5) all around the region
Very interesting question but unfortunately there is no easy way of doing it using HTML/CSS. There are several proposed solutions which you can find with bit of googling like this one Make part of a image transparent but i couldnt really understand that solution.
So how i'd go on about this and probably the simplest solution would be to initially have all the image greyed out (low opacity) then when the user draws the div on top of it by giving x, y, width, height.. then in that div, display the cropped part of that same image with normal opacity using the values of x, y, width and height.. you can get the exact part of the image to be displayed in the div. For this purpose, the following thread will help you:
CSS Display an Image Resized and Cropped
Idk how useful this method will be but that's one way to do it or atleast i'd do it that way.
I have a lot of photos with links to wherever, and I'd like to have a semi-transparent box come up on hover, after a delay, with caption and copyright for the larger underlying photo. In my dreams, I'd like the smaller overlay to link to the original photo or the photographer's site, while the still-visible area of the underlying image will still link to wherever. If it make a difference, this is on a Joomla site (with jQuery already loaded) but I'm generally able to hack the PHP and HTML on the template.
I see a few pretty straightforward ways to overlay a linked box over a non-linked image or a non-linked box over a linked image, but can I set up a linked box over a larger linked image, with the overlying box intercepting clicks just on itself? I'm guessing that this would require some JavaScript, but at this point I only have a hazy understanding of JavaScript, so at very least I need to know whether JavaScript can ultimately do that, before I get into this, and I'd love to get a generic script to do this.
The overlying box can be in a consistent location -- like full-width at the bottom of the underlying image -- rather than, say, a tooltip located relative to the mouse cursor. Seems like a script would have to respond to a click in the image area, then check whether it also falls inside the overlying box, and act accordingly. Could a script do that, and, um, might I get a rough scrip for something like that?
Thanks,
Drew
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 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!