Expand my Community achievements bar.

Clickable image map

Avatar

Level 10

I have an upcoming form for injury reporting.

There may be a requirement for the form filler to be able to mark one or more injured areas on an image of the body.

Possible?

4 Replies

Avatar

Former Community Member

Sure ...you can overlay objects (i.e. checkboxes) ontop of an image.

Paul

Avatar

Level 10

That'll work - I guess I was hoping there was something fancier.

The body is divvied up into sections, I thought it would be cool to colour the different sections that are selected. I guess the only way to do that would be to have hidden image overlays that are revealed on click.

Avatar

Level 10

Hi Jono,

I think that you are definitely on the right track.

In Photoshop you could create layers and colour in red each of the sections on different layers. I would set the background to transparent. Then save each layer as a GIF with transparency.Each image will be the same size, but will only have the red colouring

Then in LC your base static image of the body will remain visible. Duplicate this however many times and change the static images for each GIF section.

Then when the user clicks the red will appear over the relevant section(s).

I think that the checkboxes are good, because in the form (both on screen and printed) it is clear what parts of the body were injured. In addition you could have a small script in the checkbox that if ticked changes the caption to bold and red (complementing the body map). If you wanted a clickable body map you could change out the checkboxes for invisible buttons (with tooltips). Clciking the button would change its value from 1 to 0 and then an if statement could alternate between showing and hiding the red section.

Good luck,

Niall

Avatar

Level 10

Ah, thanks Niall that might work - I didn't realise LC would handle transparent gifs.

I wasn't going to bother as I thought I'd have to code for every possible combination of injuries.