Superimpose links onto graphics


Fred Kotler
 

In Freeway, I was able to superimpose transparent graphic boxes with dashed edge lines onto sections of a graphic and then link the box to a different page so a user could navigate by clicking on a map. Is this possible in Xway and if so, how do I do it?


Jeremy Hughes
 

Hi Fred,

One problem with image maps is that they don't scale on mobile devices. However, it's possible to use CSS to create a similar effect (which will scale):

  1. Insert the image within a div: in Xway, insert an empty container box (which will default to a div) and insert an image within this empty box.
  2. Set the div wrapper to have 75% bottom padding (for 4:3 aspect ratio, e.g. a 1024x768 image).
  3. Set the width of the image to be 100% (and remove any maximum widths or heights)
  4. Set the image position to be absolute (choose Absolute in the Position popup in the Style section of the Box Inspector).
  5. Insert another box within the box that contains the image (select the image in Xway and choose Box from the Insert menu or click on the Box tool)
  6. Set this box to have absolute position
  7. Give this box a percentage width and height (e.g. 25%): you can resize it later
  8. Give it a percentage left and top position (e.g. 5%): you can move it later
  9. Remove any minimum widths or height
  10. Position/resize the box to be where you want it
  11. Give it a link (and border if you wish)
  12. Add other boxes and apply links in the same way
Jeremy


Fred Kotler
 

Jeremy, thanks for the detailed instructions. Following them I was able to add in overlay link boxes onto the maps on my website. Since my maps are not to any particular width/height ratio, I found that the bottom padding should be adjusted to whatever value prevents any content below the map from overlaying the map. The completed Xway version of my site now recreates its predecessor Freeway site with the added advantage that it now scales properly in vertical and horizontal orientations on devices from iPhone to iPad and 27 inch iMac. Xway is already a great product and I look forward to your continuing to add features.

On Jun 21, 2021, at 9:14 AM, Jeremy Hughes <jeremy@...> wrote:

Hi Fred,

One problem with image maps is that they don't scale on mobile devices. However, it's possible to use CSS to create a similar effect (which will scale):

  1. Insert the image within a div: in Xway, insert an empty container box (which will default to a div) and insert an image within this empty box.
  2. Set the div wrapper to have 75% bottom padding (for 4:3 aspect ratio, e.g. a 1024x768 image).
  3. Set the width of the image to be 100% (and remove any maximum widths or heights)
  4. Set the image position to be absolute (choose Absolute in the Position popup in the Style section of the Box Inspector).
  5. Insert another box within the box that contains the image (select the image in Xway and choose Box from the Insert menu or click on the Box tool)
  6. Set this box to have absolute position
  7. Give this box a percentage width and height (e.g. 25%): you can resize it later
  8. Give it a percentage left and top position (e.g. 5%): you can move it later
  9. Remove any minimum widths or height
  10. Position/resize the box to be where you want it
  11. Give it a link (and border if you wish)
  12. Add other boxes and apply links in the same way
Jeremy


Jeremy Hughes
 

Adjusting the padding in this way is fine - but if you want a way to calculate it, you can use the following formula:

Padding = (Image Height ÷ Image Width) × 100.

For a 1024 x 768 image, this gives a padding value of 75%

Jeremy