How do I keep a hotspot in line with background?

I’ve got a background as an image and there are part of the image where I have overlaid hotspots.

I’d like to keep the hotspots in relation to the background when the browser is resized, how do I do this?

As currently my hotspots shift from the position of the background - for obvious reasons.

This is pretty complicated and you’d probably be better setting up adaptive views rather than trying to do it dynamically. There are 3 things you need to do:

  1. Resize the background image
  2. Reposition the hotspots
  3. Resize the hotspots (they need to grow and shrink as the browser is resized)

I’ve had a quick play and I think you can do this roughly by using the OnPageLoad interaction and:

  1. Resizing the background with:
    Set size of image to [[Window.width]] and [[Window.height]]

  2. Repositioning the hotspots by placing them all at 0,0, then moving them with an operator:
    Move hot spot 1 to [[Window.width / 4]] and [[Window.height / 4]]

  3. Resizing the hotspots using the same technique as 2)

Axure file attached.resize.rp (663.0 KB)