Forum Discussion
Zoom Picture *and* objects/shapes?
Hello! Here's my situation: I have some slides with pictures of some forms. The forms have animated highlights/outlines that can be triggered to point out various sections (e.g., "Click Hotspot A to highlight Section A"). I also have the Zoom Picture function on the images. However, when clicking to zoom in, only the form itself zooms without the highlights—basically as expected.
We are trying to figure out a way to zoom in the form with the highlights. So far, the only thing we've found that functions is to hardcode the highlights so they are part of the image—but then, of course, they can't be triggered/animated on the slide. I had the idea of a separate state with the highlight objects, but it appears you can't both zoom and execute a trigger, so I can't, e.g., change to the "highlight" state and then zoom in.
Any thoughts on how to achieve this effect?
Thank you!
Here's a screenshot. There are hotspots over the list items to outline sections with red boxes. I want to zoom the form *with* the red boxes.
3 Replies
Hi, Nedim. Thanks for your insight. You are correct about the setup; it's a single image with several highlights that correspond to the list items on the left. I'm not necessarily looking to zoom on each individual highlighted area. I would be ok with zooming in on (a version of) the document with all highlights visible.
It seems that there is not a way to click to zoom in on the image and also have it display something with the highlights hardcoded (e.g., zoom + change state).
Yeah, it doesn’t look like there’s a built-in way to use the “Zoom Picture” feature to swap or display a different image state instead of the original image without additional custom coding.
The “Zoom Picture” feature uses the original image and references it outside the slide container, applying a slight scale transform as a visual zoom effect. It does not support dynamically replacing the image source or mapping different image states during the zoom interaction.
This can be achieved using multiple images, as shown in the example in my previous post, with a small JavaScript snippet to modify CSS. However, building a fully custom “state-based zoom image system” purely with JavaScript is usually not worth the effort.
I’m not completely clear on your setup, but based on the screenshot, it looks like you have a single image with several highlighted shapes that correspond to items in a list on the left. If that’s the case, the zoom feature will always zoom into the same image, which is expected behavior. It won’t automatically display different outlined shapes unless you use separate hard-coded images with different outlines.
Normally, I would handle this with JavaScript, since it’s the most practical way to override the default behavior. For example, you could dynamically add a border or outline to the zoomed area even if the original image does not contain one. I would use multiple images instead. Without JavaScript, I don’t really see a reliable workaround for this behavior.
