Need help with rollovers please!

RB
Posted By
Rich_Brodsky
Jan 5, 2007
Views
194
Replies
3
Status
Closed
FIrst time posting here and first time trying to make rollovers. I’m working with this image:

<http://216.180.251.194/~grape/>

I’m trying to create a series of rollovers for each little triangular piece here (I’m trying not to use the word slice to avoid confusion). I have Photoshop, Image Ready and Dreamweaver. I have the image of the grapefuit circle broken out into layers and each piece has both a flat version and a raised version. I’m just not sure how to approach it. Any tips? Can I create slices out of each layer or do slices need to be recatngular? How do I do this?

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

SF
Scott_Falkner
Jan 5, 2007
Flash.

Rollovers within an image are accomplished using tables. Any rectangular area within that table can be given a rollover effect. That rectangle can be very small, and the effect can change any other image, not just the little slide in that table cell.

Like this…

The tinted area shows all the cells needed for the "gigs" slice.

To get the effect you want, that image will need to be broken into hundreds of pieces and recombined in a table. Rollover instructions would then be added to hundred of cells in the table.

Even if you got all that done, you have to accept that the user’s web browser will be updating lots of images simultaneously. There are 69 cells in the "gigs" slice. Moving from "photos" to "gigs" would require switching all of the cell images in both slices — over 120 images. It will not be seemless.

I might be wrong. It might be possible to use image maps and have them trigger Javascript rollovers, but I don’t think it can be done.
RB
Rich_Brodsky
Jan 5, 2007
Wow. Thanks. This is a lot trickier than I thought.

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

Related Discussion Topics

Nice and short text about related topics in discussion sections