0

I need to change the color of a specific part of a graphicImage when a button is clicked. I am using JSF, Primefaces, and CSS.

I positioned the image using:

<h:graphicImage url="/resources/imgs/img.png" style="margin-top: 15%; width: 100%;"/>

I tried to put a primefaces p:panel inside the graphicImage:

<h:graphicImage url="/resources/imgs/img.png" style="margin-top: 15%; width: 100%;" >
    <p:panel style="background-color: red;"/>
</h:graphicImage>

But it does not show up inside the image. Is it possible to put something "inside" the image? Using this, when the page is resized, the component should resize within the image.

Bruno A
  • 117
  • 1
  • 13
  • 3
    Images can't have contents so you can't put anything inside them. – Paulie_D Feb 27 '18 at 14:58
  • why not replace the image on button click? – Tim Gerhard Feb 27 '18 at 14:58
  • @TimGerhard because there are a lot of parts in the image that I want to change the color when a button is clicked. And there are a lot of buttons (each one controls one part of the image), so I would need a lot of combinations (and images) to represent that. – Bruno A Feb 27 '18 at 15:00
  • @Paulie_D So is there something to do about it? Maybe position the panel above the image? The problem is that I need the panel to resize exactly the same way as the image. – Bruno A Feb 27 '18 at 15:00
  • Try in plain html and extrapolate to JSF... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area – Kukeltje Feb 27 '18 at 15:01
  • Sounds like a job for SVG – Paulie_D Feb 27 '18 at 15:03
  • Check https://stackoverflow.com/questions/1906734/visible-area-tag – Kukeltje Feb 27 '18 at 17:27

1 Answers1

0

The easiest way to do this is to simply edit th epicture by itself. Photoshop offers a 7 day free trial. Download it, and add the border or your color overlay to the part of the image and instead of the original image running, set the background to change when it is hovered upon or clicked. Your question was not clear so I do not know exactly what you want.

Azync
  • 154
  • 10