PDA

View Full Version : grrrr *&*$% hotspots!!!


stupid_dummy_head
05-23-2009, 05:12 PM
I've been trying this for hours, literally! Okay, I've got a design idea that I want to implement on my site. I'm designing a site for a hospital visitation program.

The idea is to make a navigation bar using pill shaped buttons which change color when the mouses passes over it. I know how to do that using table data boxes.

However, I want to put these pill buttons onto an image of a medinice cabinet, so it looks as though the pills are inside the shelves of the cabinet. This is where my problem comes. I can't get the pills to do the rollover effect of the text changing colors without affecting the entire cabinet image as well.

I've added hot spots to the pills, but when I try to add a rollover effect to the hotspot the rollover affects the entire image. I tried creating the image in fireworks using the "insert a button" function. I was able to get it all set up, but when I try to export the image exports in 30 different pieces because of the slice guide lines literally slicing the image to pieces. VERY frustrating! Even then, it doesn't seem to work and I really don't want my page taking forever to download because 30 little fragments of one image are all tryig to load at the same time.

I know this can be done, but I'm really lost here! Thanks for whatever advice is offered.

davidj
05-23-2009, 05:25 PM
you need to design the whole cabinet image in photoshop and slice it up. Making sure you focus on the pill buttons (cut these out accuratly). When you piece these back together on the page you can take the pill image and drop back into photoshop and design the rollover state. With CSS you can then style an a{ to perform the swap