I'm trying to figure out the best way to slice up a circle. I wanted it to have a roll over where you moused over the circle and it switched colors and was a link. BUT, you can't slice circles, can you?

What's the best work-around to my problem? I also posted a thread in the Photoshop section as well with the same question because I'm not sure if the solution lies within Photoshop or within coding.

EDIT: Also realize that slicing squares will not work because I only want the circle to change colors when it is moused over. If I just slice it as a square it's going to change colors prior to them actually reaching the circle.

Actually, slicing squares will work in this particular case and it's the only thing you can do to solve this issue. It's not Photoshop in this case; it's coding.

What you want to do is use the area tag to create a circle. You'll have to supply three coordinates; the X coordinate of the circle center, the Y coordinate of the circle center, and the radius of your circle.

I'd whip up an example, but it's bedtime for yours truly and besides...it'll be more rewarding for you to take my small hint and work your way toward the answer than it will for me to give it away.

Thanks. I'll attempt to do this and then come back with any questions.

Using the script based on http://www.w3schools.com/js/tryit.as...ryjs_animation

What I'm doing currently isn't working... see --> http://niosis.awardspace.com/testsite/

Ignore the JPEG and table usage.

That's because your images are in a subfolder, and you didn't include that in your javascript code.

document.b1.src ="images/Untitled-1_03.jpg";

I bolded the key part to change.

How would I go about using this on all 4 buttons? I don't know how to make that work or where to put what... etc etc.

Originally Posted by JHilsee

How would I go about using this on all 4 buttons? I don't know how to make that work or where to put what... etc etc.

JHilsee,
I have no experience with Photoshop, but I know this can be accomplished
with Fireworks by using the polygon slice tool and swap image option.

Here is a working example... http://www.moxxnixx.com/circle_slice/
This is a standard export into html format without any modifications.

Look at the source code for more info.

BTW - I'm just showing how I'd do it, not that it's a preferred method.

Originally Posted by Moxxnixx

Look at the source code for more info.

I can't make heads or tails of that source code. However, that is almost the exact effect I was going for. Got a tutorial on it? I wouldn't know where to start.

EDIT: Well, I've actually already got everything sliced and what-not, so all I need is to figure out how to make all the others animate. I also don't have Fireworks.

http://niosis.awardspace.com/testsite/ <----- is what I have currently. (Link is down at time of posting. However, I think it will come back up shortly.)

As I said, the final output was done using the export feature in Fireworks.
I have no idea how these steps would be done in Photoshop. I don't think
PS even has a polygon slice tool. But here are the steps I went by...

1. I created the initial image as shown in my example.
2. Using the magic wand tool, I selected and created a separate image of each quarter.
3. I edited each quarter image to the mouseover effect I wanted and saved each one.
4. I went back to the initial image and used the polygon slice tool to create each slice.
5. I right-clicked each slice and chose the swap image option.
6. I associated each slice to the individual mouseover images I saved above.
7. I used the preview in browser function to test the image.
8. I exported to html the selected slices only and did not include areas without slices.

I hope this made a little sense.

Originally Posted by JHilsee

I also don't have Fireworks.

Thanks for the tutorial, but that's not really an option in photoshop .

Sorry, didn't see your edit. Maybe you could download a trial and use it.
Other than that, hopefully somebody else will have an answer for you.
Good luck.

Yeah, I remember asking an incredibly similar question on another forum but I can't recall the answer. I'm sure once awardspace goes back up I'll get a quick response.

EDIT: Strange. Awardspace.com is up but my site isn't. AND I can connect to ftp...

Ok, my site is now up.

www.niosis.awardspace.com/testsite/

How do I get it to animate all of them? I have all the images and etc ready.