I'm building a site that's an online version of a current art exhibition and I'm having problem sorting out some of my navigation. I've followed this tutorial on the 'A List Apart' site:

 

CSS Sprites: Image Slicing’s Kiss of Death

 

A link to my test page is here:

Test Page Link

[it's not been tested on all browsers yet, so best to view it on a PC in Firefox if possible]

 

When you roll over the small polaroids you'll get the gist of my problem. Only part of the hover images are being displayed. The first artist hover works OK but the rest don't. Each hover is meant to darken all the polaroids apart from the selected one and display the artists name. Does anyone know how I can fix this? I've tried using the z-index thing, but as I've not used that I'm not sure how to implement it properly.

 

A link to the CSS for the navigation is here:

CSS

 

If I can't get it to work, I'm going to have to rethink the whole nav which will be a shame, especially as the clinet has already approved the visuals.

 

Please Help

Oh God sounds a right Headache E!

 

I had a search for you, does this help?

 

http://www.frankmanno.com/ideas/css-imagemap/#ex

 

It uses multiple rollovers on one image, a bit like yours , you could set the rollovers to 100% - so it takes up the entire space? Just a thought. I think we a bit of tweakig this could do what you want it to.

 

Ben

Thankd for the link Ben - I'm going to try his definition list idea tomorrow as he's got overlapping areas and so that might work...my brain is a bit too much like mush now. Cheers. E

No problem, really hoping it works, I bet tomorrow when you have a good nights sleep and are refreshed you'll crack it in no time

Hey

 

A good nights sleep help to realise my initial error with this problem...

 

I managed to get this fixed but have had to compromise a little as there was a major flaw in what I wanted to achieve originally and I realised this after looking at that example you posted and a few links that I got from that page. Basically the hover state can only be the area specified as the link - i.e. the active zone - it can't have different dimensions. So originally I wanted the entire image to swap on rollover when I had only defined a slice as the active state - so it was just never going to work.

 

So now I've got 4 separate rollover states and have removed the dark bg and added the artist name to each individual polaroid, so now when you rollover each polaroid, it comes to the front of the pack. See the link to find out what I mean:

 

Test Page Link

[it's not been tested on all browsers yet, so best to view it on a PC in Firefox if possible]

 

I still need to optmise the images as the page takes a while to load...you also might need to clear your cache to see the changes.

 

Thanks for your help.

 

I might put all of this into a tutorial and add it to the tutorial site as once this site is built, these links are going to disappear. Good idea or not?

The above links will probably not work anymore as I've been messing about with my code and files and images as the site is in development - sorry about this, but I got my problem sorted and had to move on.

That is a stunning site eskymo! - di you do the graphics yourself?

Hi Dave

 

Thanks for the positive comments - I've done all the graphics myself - apart from the damask kind of background image - it's something I bought and downloaded from Dreamstime and adjusted to suit my needs.

 

I changed the layout to this after brainstorming some issues with myself and it has now changed again, but only slightly.

 

I will be building this site over the next month as it's got to be finished for the end of October when it's going to be touring schools & other venues in Fife - it's not going live online until probably November, but I will no doubt be posting updates to this forum about it as it's great getting feedback.

 

E

What a lovely site, Eskymo! The deep honeyed brown is so warm and inviting, and the faded scrollwork background adds a great deal of depth. Love the 3D effects with the photos and key in the briefcase (or suitcase?). And it has a historic feel without seeming ancient or stuffy. An excellent start, and I look forward to seeing it develop! Congrats and best of luck to you.