I’m learning web design a bit in my spare time, and I’m trying to make a web page for my in-laws. The background of the page is a big image (maybe not the best way to go since it’s a bit slow to load, but I wanted it to look decent, and my photoshop skills are passably good). I want to put a main menu of links to other pages (with mouse over states) over the bg image. I also want some hotpot buttons over photos on the page that link to larger versions of the photo. If I make a table and set the image as a cell background, I can put the menu buttons over it, but I can’t add hotposts. If I make it a normal image, I can put hotspots but not other image buttons on top of it.
Any suggestions? The WIP site is here if my explanation makes no sense:
Most of the links are not working, but what I’m trying to do is have the yellow menu at the top be somewhere down over the green trees of the background image and have all the photos have hotspot triggers over them (There’s one set up on the photo of the stairs toward the bottom). I know how to make all the elements, I think. The menu is working, although the pages it links to are temp or not made yet, and the hotspot trigger works fine (although the image it links to is too big). I just don’t know how to get the elements working together.
I think the way to do the menu part would be to cut up the main image into segments, like a sort of mosaic, so that along the top you actually have a row of seven small images: first a bit of sky, then each of your five buttons (which you can make transparent looking if you like), then another strip of sky. Then, using a table with no borders or padding (or using CSS I guess), you arrange these 7 images, plus the main image of the trees below, so that they are all seamlessly touching, which will look like one big image.
The images don’t have to be cell background, they can just be in the cells. Then, for your photo links, you can use regular hotspots on the larger image. (Of course, that will not give you rollovers for the photo links. To get that effect you would need to use the mosaic technique again, I think.)
Or else, you know, leave it like it is. It looks quite good to me.
That worked, thanks. Making the mosaic is a bit of work, but I can keep the look of the design, and I learned something about how not to lay out a web page
Oops. This works as long as I don’t make the browser window too narrow. Then the images wrap like text, and it looks like a jumble. Can I lock the images somehow so the layout stays consistent?
That did it. Many thanks guys. I might even be able to get this done before Christmas is over.
Can you suggest a book or online tutorial or something that would help me learn this stuff? I’m finding that when I have an idea of what I want to do, I can usually poke around the internet and figure out how to do it. Problem is my initial idea often seems to be misguided or at least not the most efficient approach, and I end up with some patchwork Frankenstein of a web page.
