Looking at your page4.html, the map room, I see the first download link is
embedded in the image. I can right-click the image and download the file
image10.gif and clearly see the download text is part of the image. Don't
have hyperlinked text in an image.
Now you can have "hotspots", an area of an image that has a link, but that
needs to be an existing image. not an image that Publisher creates from
layered objects. Publisher can be inconsistent in this regard. In fact you
probably saved the page once and uploaded it and saw the embedded link
worked then later saved and uploaded it again and didn't realize that
Publisher didn't get the embedded link that time. A lost link as you'd call
it.
Place the download text below and off the image, then hyperlink it to your
file. Like you did on the third map at the bottom. ( the second one is also
embedded in the image, file image12.gif)

As far as the "%20" - URL's DO NOT support embedded spaces. The browser
inserts %20 in place of the embedded space. The recommended practice is to
use an underscore whenever a space is wanted ie osia_vancouver_usa

The other recommended practice being to use all lower case letters, for two
reasons, one it's easier to remember and type links without knowing when to
use an upper case, and two, Unix, which most web servers are running, is
case sensitive, which is why we have reason number one.