I would say that you should look at some menu scripts and analyze them so that you can edit it to add your images. Check www.dynamicdrive.com for some of these menus. If you need any help customizing the menus, post again.
While I agree with Havik to some degree, there's really no need to go looking at unrelated scripting stuff for this. It can be easily accomplished in Photoshop.
When you open your image in Photoshop, you should see rulers along the top and left side of the image window. (These are usually gray bars with little hash marks and numbers in them.) If you don't see the rulers, go under the View menu in Photoshop and select Show Rulers (if you're on Windows, Ctrl-R is probably the keyboard shortcut). Also, while you're in the View menu, make sure that it says Show Guides (not Hide Guides) and that the Snap To Guides option is checked. (These last two items are for the next step.)
Next, go to your image window and click somewhere inside the left ruler ... and with the mouse button still held down, drag to the right. You should see a dotted line following your cursor. This is a guide. Drag the guide in between two menu items (like Home and Contact Us) so that you create an imaginary separation line between the two options. Let go of the mouse button, and the guide will change into a solid, bright line. Now repeat this step over and over again until you've created imaginary separation lines between all the stuff you want to link to. (This will also work by clicking and dragging from the top ruler, too.) Note: You can move guides around as much as you want ... even after you've placed them.
You've just finished the "slicing" part that you mentioned.
Once the guides are in place to your liking, save the image file. Now select the Marquee tool (the dashed box in the main toolbar), go to the image window, and move the cursor over the edge of the image near one of the guides. Click and start to drag, and an animated, dashed box (a "marquee") should start to form and follow your cursor. Drag this marquee over to the next guide, and the marquee should snap to it automatically. Now, you should have selected an area of the image that you want to use as a button/link.
Next, with the marquee still active, go to the Image menu in Photoshop and select Crop. Everything outside the marquee in the image window should disappear, so you're only left with portion you want to use as a button/link as well as the guides you used to create the marquee.
You've just finished the "cropping" part that you mentioned.
Now make sure you use the Save As function (not the Save function) under the File menu, and call this graphic whatever you want ... like menu_01.gif or menu_01.jpg or whatever. Close the image window after it's saved.
Next, open to the "master" image file (the one with all the guides you placed), and repeat the previous cropping steps until you've saved the entire image as a bunch of separate chunks (menu_02.jpg, menu_03.jpg, etc.). Make sure you stick to the guides as you split up the "master" image ... otherwise, things make look weird later when you bring all the chunks back together.
Finally, go into your Web design program and just place/import the separate images one after the other. If all goes well, they should seamlessly stack together and appear to be one image. Note: To avoid possible graphic shifting and display problems, make sure you set the border to 0 (zero) on the images that you use as buttons/links.
Reply With Quote
Bookmarks