Starter tips for image based homepage

I have only ever created quite simple grid based websites using CSS.

My new site involves creating a homepage which is a large image of a town where each house is clickable and acts as the navigation. I know these types of sites are often created in Flash but I want to avoid it so that it is compatible with iPhone. I am not looking to do any advanced animation so I was wondering how I would approach this.

I suppose it will involve slicing but how does it work if the placement of the links are irregular and do not follow a grid system?

The slicing isn’t normally a problem but you do have to think:

does someone using something less than 3g want to pay for (and wait for) download some huge image or group of images?? I’m just saying, it might be a horrible idea to start with.

(not all small screens have low bandwidth but if this is for the general public you can assume plenty of phones are using crappy networks)

But as far as houses as navigation, you can probably just use a list
<ul>

and image replacement. You want this to work on iWhatevers… what about other phones? I would think you’d want that each house to be able to stack on top of each other like
house1
hosue2
house3
house4

so it can fit on a small-width screen. On a wider screen, the houses can start riding up next to each other:
house1 house2
house3 house4

or all the way across on a wide screen desktop:
house1 house2 house3 house4

This means it’s probably not a good idea to start with a wide, static image of all the houses because then they can’t adjust for user’s screens.

Or use some different technique and only introduce the images once the screen is wider.

Thanks for the advice. I’d rather not have the houses rescale or refit according to screen size. I would like the layout and position of the graphics to be static.

So should I use a background image of the town and each house has its own div and I just use absolute positioning to lay it on top?

What is the best way to do it?

Well, leaving phones out of this (since a static image is going to suck for them no matter what… you know that zooming out means making everything so small as to be unreadable), and just focussing on desktops and the such, I think you’d want something like what Mike Cherim has done:
http://green-beast.com/experiments/css_map_pop.php

What he has there is a plain old ordinary list, so this is automatically accessible to machines like search engines and text browsers and users of screen readers etc (assuming you don’t then play with display: none or do weird Javascript stuff).

In your case, the main photo with everything on it would be the background of your ul, so your ul will have its height and width equal to the size of the photograph. For positioning of the clickable areas over houses, you’ll set the ul to position: relative.

I believe when I do this sort of thing I just set the li’s to display: inline to make IE happy… otherwise, it’s as if they aren’t doing anything useful. If you still see bullets in some browser, you’ll need to add list-style: none to the ul.

Then the anchors will be absolutely positioned. To keep the text from showing (because, yeah, you will want actual text for all those who aren’t getting the image for whatever reason, and that can be a lot of visitors), you can add a span inside the anchors to wrap around the text. The spans either get hidden under the images held by the anchors, or just pulled off-screen or away from the ul is enough if the ul has overflow: hidden.

Each anchor will need its own class or id, so that you can position each one precisely. I start out giving them 1px red borders so I can see them (but do final positioning after removing it since of course the borders move the anchors down by 1px and left by 1px), and set each individual anchor to the minimum required size to cover each part of the house. Since the anchors are absolutely positioned, you can give them a z-index. This will be useful if possibly any one house can overlap another house, so you can decide which house maybe should have precedence (which house you think someone is more like to want if their mouse sits in an ambiguous area where two houses overlap), and their spans would need position: relative and a negative z-index to set them underneath the image the anchors will have.

Yes, the anchors will each have their own image. To reduce bandwidth, they’ll all just have the same image as the ul, but you’ll set the background-position of each one to show just the part of the image they are sitting over. This way, the anchors can cover up the spans holding text. If there’s no image for whatever reason, users can still read the text in the span and click on the appropriate house.

You can also have the span come back up and show text like a tooltip on :hover if you’d like.

So example HTML (you will use better id names than this, but this is just an example):


<ul id="housemap">
  <li><a id="house1" href="somehouse.html"><span>Georgebury house</span></a></li>
  <li><a id="house2" href="somehouse.html"><span>Public Library</span></a></li>
  <li><a id="house3" href="somehouse.html"><span>House of Horrors</span></a></li>
  <li><a id="house4" href="somehouse.html"><span>House, MD</span></a></li>
</ul>

You can also have an alternate photograph, showing some difference in the house: for example if it’s a black and white photo and you also have a colour version, you can make the anchors swap either images or just move around the large single image (a big sprite) to make the house become coloured on :hover or something.

Wherever you use :hover, use :focus as well. This lets keyboarders navigate as easily as mousers.

http://stommepoes.nl/Voorbeelden/spanjekaart.html Here’s an example of using highlights to show users where they are hovering (since the autonomous regions of Spain are irregularly shaped, the anchors, who are always square, overlap in places) and it’s just plain old anchors (though yeah this example is a definition list… also it has a lot of CSS code just for IE6, everything followed by * html; if you are not supporting IE6 then the code gets much much simpler).

The sprite: http://stommepoes.nl/Voorbeelden/images/spanjekaart.gif
I would not recommend gif but I made that before thinking : ) since your’s is a photograph I’d do all the slicing work on a png, and finally save as a jpg for smaller filesize (unless it’s black-and-white… png might be able to do that ok without ginormous filesize).


An entirely different option would be to use an image map. You set an image with <img> tag on the page and a token (name or id) and then a <map> which references that. The advantage of this is each <area> anchor inside can be set to a shape exactly following each house (so should be no overlapping), but I have never used image maps because when I was getting into all this they were known for being inaccessible. They can actually be pretty accessible so long as you give each <area> tag alt text the same as you would have had in the anchors in the example above, and again include :focus styles wherever you have :hover and don’t remove the outline property.
This will also give you a lot of HTML compared to the list. The list technique has simple HTML and lots of CSS. Since CSS is cached, it might be an advantage for the user to have bigger CSS and smaller HTML files, but if this is kind of a one-page thing then there’s really no advantage either way.

Nice example Sp!

I really like it :slight_smile:

Many thanks SP! Thats pretty much what I need to know.

Brilliant example :slight_smile:

http://www.lightspeedvp.com/ check out this page also.

each person has a separate link. it’s one single image. it’s working with JS switched off. I guess they’ve used background-positioning.

this is another option.

That site just uses an image map.