Turning Background Images w/ hovering into links

[redfoo]

Hello,

I am fairly new to coding and wanted advice on how I can go about doing 2 things:

1) Turning a series of images into background (non clickable) images and have the images change when hovered on, respectively.

2) Making these background images link to other pages.

Here is a perfect example of what I mean: http://www.craigearl.co.uk/

I have checked the source code but was not able to figure out where the key information was as to how this effect was achieved.

One of the reasons I want to achieve this is because I noticed, and I might be wrong, that websites with images turned into background images tend to load faster. Let me know if thats right as well.

Thanks in advance for your help

[M.Jackson]

Well, what it looks like that site has done is created 4 images that are twice as wide as you can see. It then offsets them by 50% on hover.

a#nav-people:hover, a#nav-landscapes:active, a#nav-landscapes:hover, a#nav-landscapes:active, a#nav-bands:hover, a#nav-bands:active, a#nav-everyday:hover, a#nav-everyday:active {
  background-position:-160px 0;
}

These images are called an atlas. The "-160px" is specific to the layout of the source image.

There are dozens of ways to make an image clickable. It really depends on what your other needs are.

Now, the altering of the background of the entire page is more tricky. You have to delve into javascript to do that.

[Excavator]

Hello redfoo, M.Jackson also ...


I'm not sure I've ever heard it refered to as atlas. See CSS image sprites here.

[bdbolin]

You can build the sprites as mentioned by Excavator super easily by visiting this link: http://draeton.github.com/stitches/

[M.Jackson]

A sprite is a single image on an atlas.

A 'sprite-sheet' refers to a specific type of atlas where all the sprites are exactly the same size.

Edit: I once lost a fight with an artist over this...