Clickable areas on image
I need clickable areas on an image. How can I do that? <map> and <area> doesnt seem to fit the usecase I have.
65 Replies
@ἔρως
you could try an svg (full transparent) on top of the image
continuing conversation from here https://discord.com/channels/436251713830125568/448294302053957632/1359859103823827134
Buttons with opacity:0
Okay so if I want a clickable circular area, then I would add a <circle> element to that position and then listen to the click event?
Sure thats also possible
Svg would help with positioning though
everything is possible... event divs 🤣
you just need to use the best tool
If it is for user clicking it really should be a button of some sort
So no svg at all and only buttons over the image?
buttons wont work
would need to be links
I think @Chris means buttons without svg
Just simply buttons
I haven’t read what was discussed in the chit-chat thread so I may have missed something.
I just have a jpg image and this image must have clickable areas
preferrably with hover effect too
the quick and dirty rule to choose between a button and a link is that buttons do something, and links take you somewhere.
so if your clickable area navigates you to a new page, it should a a link
if it just updates a counter or adds something to your cart, it should be a button
Yeah link is defo not what I want, thats why I didnt want to use <map> and <area>
What will happen when you click on the areas?
Well clicking there should actually create a checkmark
So basically a "you have selected this area of the image"
Ok, so the clickable element has to have the shape of the area clicked.
SVG does seem to be the way to go then.
Yeah but the shape is always a circle
In that case you “could” use a button (or, better still, a checkbox)
I'd suggest a label pointing to a checkbox/radio-button
Its basically this
You can check the numbers
Damn thats a big brain move because thats exactly what should happen
Clicking on it actually selects a checkbox in a list below the image
So I just have to position the labels relative to the image at the given coordinates
Thank you everyone
for future reference, if you'd included that in the problem description, you'd probably have had an answer much sooner
Yeah I didnt realize that this was part of the problem
you have to use a <foreignObject> for this, by the way
It just clicked for me when you said checkboxes, then I realized I have checkboxes
foreignObject?
yes, you cant put html inside an svg
you have to use a foreignObject tag to then put html
Im not gonna use svg at all
alright, how will you position the checkboxes then?
css?
yeah, but you have to be extremely careful
if 2 are too close, one will be on top of the other
What do you mean
if you position based on percentages, you need to check if they will be on top of eachother on mobile
I want to position based on pixel
Can the image not be converted into an SVG? Judging from the small screen capture your provided earlier it looks like a drawing.
Its too complex to be converted into svg
Actually you might be onto something with % positioning
pixel positions will have even worse issues: you will have to interpolate the positions for smaller/larger screens
if the screen is 2-3 checkboxes smaller/larger, your positions are all wrong
Yeah, the thing is, I already have a working example of this app and I am currently experimenting with the apps provided data and it turned out the x and y coordinates are % values 😅
which work perfectly fine
you might have some bugs with sub-pixel rendering
I already have a prototype 😁
The label idea was lit
image map • Playground • Svelte
Web development for the rest of us
are you worried about accessibility?
Yes
labels arent focusable
Thats a concern for tabbing, right?
you can skip the lables and just use an input with
area-label
or whatever it is
no
yed
yes
but not just thatI can use two inputs?
no, just 1
What about the checkboxes below the image
checkboxes can be styled with ::before and ::after
you want to show the checkboxes there?
Yes
Thats going to be a list with names and stuff inside an actual <form>
oh, well, that is a totally different thing
So the labels idea was a perfect hit
Except for the focus problem of course
you can use the checkbox hack then
Which is?
throw all the checkboxes at the top, then style the elements based on which checkbox is checked
you can even fake a checkbox on the list
it is a terrible hack but works
Why isnt there a simple "focusable" attribute for the label? 🙄
focus is for form elements (and a couple of other elements such as links and iframes). If they took the focus that would mean a double focus for the same element (the label and the related form field).
I don't quite understand why you want them to get focus in your use case 🤔
accessibility
the labels arent focusable
If it works is it really that terrible? :p
lol yes
yesterday, ive put a <details> inside a <button> to make a shoddy bootstrap-like dropdown
it works and it is a nightmare
(ive redone it since, by the way)
[you're a monster]
https://tenor.com/xewo.gif
Tenor
youre a monster
🤣
Hey, I needed to post something so the thread appeared in the sidebar! did you not see the
:p? Denoting humour?i did, hence the 🤣
but i just wanted to shame myself for making it work yesterday 😦
(lets just say there was a lot of
pointer-events everywhere)