I have an idea for navigating my new website but need help in learning how to execute it.

I would like to use an image of a sunflower on the home page but use each petal of the flower as a link to a page within. Ideally the petal would swap images, making it obvious that it contains a link. Can someone tell me the best way to proceed with this idea? Since each petal is an irregular shape I can't simply swap out another image like I could if they were laid out in a table.

I can map the image in Dreamweaver easy enough but cannot find a way to swap images using this technique. In addition, these types of links are not as easily recognized as a rollover.

Of course I will also provide text navigation on the bootom of the page for the search engines.

Thanks in advance for any suggestions you can provide!

hey man the best way to slove ur little problem is to use flash for u website...or just for ur navagation..

flash is your best bet, unless you can do some creative slicing with the image, got a link to it?

i'd say flash as well...altho you can do it with the java-rollover that comes as a pre-builtin script with dreamweaver it might be a bit fiddily...then again that also might be the best way to go because not everyone has access to flash...and instead of making them get it (which most users wont) it would prolly be better on the whole to do it as a java rollover...

at the end of the day it is what you think looks and performs best for what you want it to do.

J

Thanks for the input everyone.

Do you know how I can do it as a Java rollover in Dreamweaver? Can I add a bevavior to a mapped image and swap out a similarly-shaped image that I create in Photoshop?

You can do it in HTML/JS. Make the default image, make an image map link, for each of the petals, make onmouseover events for each petal to replace the image with an image of the desired rollover, then change it back with the onmouseout handler. The only thing that would be problematic is that it might be a big download with all those iamges, depending on how large the image is...

or use CSS to overlay the images on top of one another and then on mouseover change the z-index and image of each petal to cover the overlap.

Do you have a picture of the flower you want to use? Depends on how close together the petals are...