Kinda complicated stuff......

[atifman]

Ok, first, visit my web site.
http://www.geocities.com/atifman/

See how those links(lesson 1, etc..) are arranged in one column? I want to change them into clickable images; colored circles with text kinda towards the middle. Sounds simple right? I already know how to do that. Here's the hard part, I want them to overlap. I want them to be different colored circles and the overlapped part will be the combination of those colors. Also, I want to apply mouseover effects to them, too. When you mouseover, I want the colors to change and the overlapped part to change as well. How the fork do I do this?

Ps: Which forum should this topic have been in? Is this the right one?

[Vincent Puglia]

Hi atifman,

Do mean like the Olympic Circles? or the way they teach sets (at least when I was young :) ? If so, you will need to use an image map. Essentially, it's a graphic with coordinates. You associate a coordinate range to a click, mouseover, and/or href.
Unfortunately, I don't play with those (gross artist), so I bothered to learn the syntax.
Regarding whether or not you're in the right section: the area map is html; the functions are javascript, and the mouseovers can be considered both. So...you decide.
Don't worry, though, someone else will come by with the code and a better explanation. If not, I'll dust off my books and get back to you.

BTW: when I went to your site, I thought: TI-99! someone else still has one? :)

Vinny

[amberbot]

Hi Atifman,
Well I looked at your website, unfortunaly I don't know exactly what kind of effect you want your links to do. The only thing I could figure out is to make the two separate images and add a mouse-over effect to it. Or was it more complicated than that? Is there a site you know of that shows this example? Maybe we can get a better picture and be able to help better :-)


Amberbot

[atifman]

I came up with the idea. There might be a site that uses this idea, but I don't know of one.
I don't think an image map would work, cause when you mouse over the overlapped part it will highlight both circles and I don't want to do that. Here's how it looks like (http://www.geocities.com/atifman/sample.GIF)...
When you mouseover the red circle it should highlight and change into yellow and then the overlapped part will turn green. When you mouseover the blue circle, it will turn yellow, and the overlapped part will turn orange. That's how I want it.

[Vincent Puglia]

Hi,

so you want something like:
if mouseovered (redCircle) overlap = yellow;
will more than 2 ever overlap?

My understanding of image maps is that you decide where the coordinates go. So, if you limit the coordinates to the non-overlapped portions, you won't have that problem.

Another thought, you could split that specific image into three portions (position them within a table or make them absolute positioned layers (divs) ). Then each image would have its own event handlers.

Vinny

[atifman]

Oh, ok! It's less difficult than I thought it was! Thanks, Vincent! I'm gonna have to make some funky javascript, but I think I can make it.

[Vincent Puglia]

Hi atifman,

no prob: "Things are easier said than done", but go for it!!!
post in the javascript section if you run into a snag

Vinny