What's the best way to implement this? (dynamic display)

PROBLEM So I'm trying to add a display on a character sheet tab that will track permanent injuries to the player's body, like so (the normal state is all blue, the red is just the highlight some of the areas for an example) My question is whether my idea to implement this is valid with the Roll20 application. (Or if there is a better way to go about doing it) MY IDEA. WILL IT WORK? IS THERE A BETTER WAY? My plan was to:  isolate the body parts/regions into their own layer in my photo manipulation tool slice up the image based on those layers, as best as I could reconstruct the image with a table overlay the 'damage' images onto the 'normal' image To prevent conflict between 'damage' images, only the red parts will be saved. The image slices that are related to damage to a body part would all be given their own "class" which would then have it's own "z-index" so that they could be toggled. The image positions would be set 'absolute' to the table cell so they all stack. I'll add an un-displayed checkbox that I'll toggle with JS to determine when the body-part damage is visible.                 

The best way to do this is with CSS. You want one master image of the body, your blue pic there. Then you want to create images of each of the red parts, with the rest of the body removed - turned transparent. The basic idea is you have the blue body shown all the time, then you have CSS rules that will overlay the red injured parts on top of it, as needed. This is basically what you described, but to to be absolutely clear: they need to be saved as separate images (pngs with transparency), not layers in a single image. Thats what you may mean, I'm just being very clear just in case. Also, you dont need a table. Just link them all to a div, and have the images by the same size (just with large parts of the image transparent) so they all show in the proper place. Since all but the base image are mostly transparent, they can all have the same z-order, just higher than the one set for the background body image. The CSS Wizardry page on the wiki has instructions for how to hide and show areas using CSS. If you have trouble, post again. The basic idea is that each damage part will have a linked attribute. When that attribute is zero it is hidden, when it equals 1, it is shown. So you have calculation in the sheet (a sheet worker) to find out if the image should be hidden or displayed (if damage is above whatever threshold is needed), and sets the attribute to 1, which cases the css rule to display the damage image.

GiGs  said: So you have calculation in the sheet (a sheet worker) to find out if the image should be hidden or displayed (if damage is above whatever threshold is needed), and sets the attribute to 1, which cases the css rule to display the damage image. This is essentially what I had planned. I was going to use an invisible, non-interactive, checkbox that is toggled by a sheetworker.  But I ran with the slice/table idea cuz that was the first thing I saw. The same principle would apply to a flex-box (right?). So long as I set the div dimensions and make all the master image and the damage png's the same size it'll give the same thing, just with less parts. I'll just need to make one image for each damaged section instead of splicing this collage together. EDIT #1. I was going to all the hassle to make a checkbox cuz I wasn't sure if there were any functions available in CSS ( I only really know about conditions under which to change visuals - like hovering and stuff). And I wasn't sure if I could change the div opacity with JS EDIT #2. Well I guess i can would use 'display: none' to set the defaults for the damage divs then set them to 'display: block' when the checkbox is checked

Stephen G. said: EDIT #2. Well I guess i can would use 'display: none' to set the defaults for the damage divs then set them to 'display: block' when the checkbox is checked I could be wrong, but I think you're going to want display: inline or display: inline-block instead of just block.  I think block would put each image on a different row...

Finderski said: Stephen G. said: EDIT #2. Well I guess i can would use 'display: none' to set the defaults for the damage divs then set them to 'display: block' when the checkbox is checked I could be wrong, but I think you're going to want display: inline or display: inline-block instead of just block.  I think block would put each image on a different row... I thought it would be fine if their position was absolute and they had their own z-index

Stephen G. said: Finderski said: Stephen G. said: EDIT #2. Well I guess i can would use 'display: none' to set the defaults for the damage divs then set them to 'display: block' when the checkbox is checked I could be wrong, but I think you're going to want display: inline or display: inline-block instead of just block.  I think block would put each image on a different row... I thought it would be fine if their position was absolute and they had their own z-index That could be...I tend to try and stay away from absolute in character sheets, because it behaves oddly, because the character sheet isn't its own window (unless you pop it out) and so absolute (in my experience) tended to be based on the entire window, and not just the character sheet. EDIT: I'm also not a web developer and only know enough HTML and CSS to get by...LOL

Yea I started last Friday not knowing a single thing about HTML or CSS so I'm still in tricycle mode. I thought that the position was referring to their immediate container. So if I had a container of a set size and set them to absolute they would all have the same position. This would work even better since all the pngs would have the same dimensions so I could just set the container size to that as well. I know if I do relative it'll try to space everything out so they don't overlap and take other elements into consideration.