Hi,
Is there a way to use imagemap in a standard page ? I want to display an image with multiple clickable areas (to different forms). Is there a better approach to do this?
Thanks
Al
Hi @alexri and welcome to the forums.
There is not built-in support for image maps AFAIK, but you can handle it somehow.
What I would try to do is:
- build a custom component (I’d use Custom HTML page also) where you have your image and the map
- configure this custom component to raise an event, name it something like “x-map-clicked”
- in this component, add a JavaScript handler for map zones’ click areas
- in this handler, just call a form’s python method just to give back control to python layer
- in this method, raise the event
- use this component in the form you need and set up the event handler for the “x-map-clicked” event
You should be able to find tons of documentation on how to do every single step, both in official docs and in the forum here.
I’m in a bit in a hurry now, but if you need I think I can cook a small example.
More suggestions are welcome.
BR
Thanks for the response. Yes I also thought of doing it via Custom HTML page , but I was wondering if there is a way to include custom html/javascript in the standard pages. If possible I would like to use standard pages built in panels and other drag and drop components while having flexibility to trigger a javascript snippet.
Because Forms are Components, a Custom HTML page can be used as a component in a standard page. So you can mix and match within a standard page.
Yes definitely.
Not a custom html page for your main APP’s form.
Just for the image map.
Just like this:
https://anvil.works/build#clone:DDFKXOTPQNNKFRVH=JG2FCCK4GG25CHGJKG6CL2WA
This way you can easily build each map as a custom component and then use it in the visual designer just like any other component.
Now that I think at it, this approach could be generalised a little so to provide a “general” ImageMap component with:
-src: image base64 or url
-maps: a Json with the maps
and the click event returning which map was clicked.
Such component could be much more useful and could be included in Anvil’s StdLib.
Working on it. 
BR
1 Like
@alexri here’s the more generalised approach.
You can use this ImageMap component directly from the designer, dragging and dropping it into any form and setting its image source and imagemap areas directly from the visual designer.
The img_src property can be set to anything that would fit into a regular <img src="..."></img> HTML tag and indeed it is placed there by Javascript.
The imagemap areas must be provided as a string list (one map per line) in the format:
Area name|area type|coords
Just use some online tool like this (BTW this really has the look of an Anvil app…) to build the HTML and the list accordingly.
Then set up the appropriate event handler in the form, to be triggered upon clicks.
In fact, upon click, the component will raise an event passing back the clicked map’s name as clicked_object event parameter.
You can clone this app and use it in your own forms as a library.
https://anvil.works/build#clone:ZLV7F7RQUWN6CZKZ=SJPTEWHNUE7MUQH77BZXC6WE
A question for Anvil experts.
When setting the img_src property of ImageMap custom component from visual designer, I expected the image to be shown in the Design view as well. Just like a regular Image component does.
Instead, it is not. It’s shown at runtime, but not at design time.
I’d like to understand why.
BR
1 Like
My working hypothesis is that Anvil-provided components contain code, that the IDE knows to call, to update the component’s on-screen image.
Awesome !! Thanks 
Oh @alexri you’re very welcome.
I had fun making this, like I almost always have with Anvil.
I hope this is just a kickstarter for you to have your own fun in building new things in Anvil.
You’ll discover that a lot has already been thought and addressed by Anvil Team, and made easy to use, just browse the docs, the tutorials and the forums.
While the rest… well… with Anvil it is fun and easy to build yourself!
That’s the power of Anvil.
2 Likes