Hello everyone! I've run into a little bit of conundrum so I was hoping that someone could help me out here.
I've had problems with image hotspots before because they would kick you out of the full screen mode when you clicked on them. I found a way around it by creating a plugin in the middle of the screen for the image and have an onclick action for a hotspot that would make the plugin visible and have a little bit of animation to make them fly into the screen. All in all, it works great! I also made it possible to make the image disappear by clicking anywhere on the screen.
Now here is the problem. I would like to add a border to the image and a little "X" icon on the top right corner. The thing is some people will be confused by just an image so if i have an 'X' somewhere, they would understand that this is closeable and clicking an 'X' would close the image the same way it would if you clicked anywhere else. All the images the client has provided are of different size and have different layouts(vertical and horizontal). Not only that, but some of these images are too big and I had to scale them down for the plugin to work,so I would fix the width and set the height to 'prop'. Now I cannot extract the exact height for the border because of that. It just gives me prop instead of actual height. Is there an easy way to set up a border and additional layer for 'X' in the correct spot or should I photoshop all of this into the image?