Given some shape, I would like it to be clickable on its filled parts, and not clickable (thus clicking through to the element behind it) on its transparent parts. Here's an example of a triangle shape:
Black lines are bounding box lines. I would like to be able to select text, or interact with any element that is within bounding box (green-outlined areas), but not covered with the filled part.
I tried SVG with pointer-events set to every possible value, but it does not seem to work. Preferred solution would make us of html5, css and png image, but every working solution is welcomed.
You can add style property
pointer-event:none
to Image it will help you out through the image
Note: it will work only to modern browsers
Related
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
I'm making a svg drawing app. I have a tool that allows the user to select all the shapes in a rectangular area.
I need a way to detect the svg shapes under the rectangle.
I tried to use "document.elementFromPoint" and "getIntersectionList" on my root svg element. I use a path svg object with the fillColor set to none to display a line. getIntersectionList selects the path if the area is over the invisible region, so it isn't working. "document.elementFromPoint" doesn't work if I scroll.
The only way I can think of is to generate a click event on all the pixels inside the area, and listen to that event.
How can I do that? thank you
edit:
Here's an illustration. The white square is the selection area. Items under it must be highlighted in red. The square follows the mouse. If I move the mouse away from the lines, they must turn back white
If you want to have a click events on the svg elements, I would strongly suggest checking ngx-svg library. It provides various svg elements and events on each of them. The usage is also pretty simple -
<svg-container id="test-container>
<svg-circle radius="2" (clickEvent)="doSomething($event)"></svg-circle>
</svg-container>
The events are available on all elements. Also you can customize different stuff using the library. For more information, check the documentation of the library.
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 would like to create an html element with a given background colour, and some text. I would then like to place an image in this div, and where the image overlaps with the text replace the color of the pixels with some other colour. The image below demonstrates the effect I would like to achieve, if we imagine the image is the black blob. However, in real life I want partial overlap of letters to be possible with the same effect (i.e. I don't want to just change the font colour where it overlaps.)
Is this possible, and if so, how?
You can assume the image is a single block colour, and that I know the exact colour as I am creating the image. You may use any web technologies, and the image will be created as a vector image so can be any format, including svg.
Not sure what the browser support is nowdays but you could try this:
http://css-tricks.com/image-under-text/
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.