Hi

I have been reading up on disjointed rollovers and found an example from Paul OB that could do the trick.

But if you look at what I am trying to achieve here http://www.boostnowbreaks.co.uk/rollover.jpg is it possible.

What I need is when a user hovers over one of the coloured circles (eg the blue one) the blue text on the left gets highlighted and so on)

Would I need to splice those circle graphics and lay it on a gradient bground and absolutely position them?

Could really do with some help with this!

Thanks for any help

As Dmitryseliv said, you will need to use Javascript.

Here is some simple code to get you started:

---------------------------------------

<a href="page?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" onmouseover="document.getElementById('remote').className='remote_on'" onmouseout="document.getElementById('remote').className='remote_off'"><img src="image.gif" /></a>

<div class="remote_off" id="remote" >Text</div>

---------------------------------------

The A tag changes the class of the DIV tag by resetting its class using onmouseover and onmouseout.

Yes there is a CSS way.. you just make your link with absolute positioning and put that circle as a background and put span inside your a. Then you position that span absolutely so that it sits right where it belongs..

If you don't get what I'm trying to say, take a look at this site's source. I used variation of this technique under that slogan in text-resize - language - print nav.

http://www.sunit.fi/alkusivu.php?lang=en

edit:
Okay I threw you a little nicer example just because that's how nice fella I am. =)

http://www.dotcom.ms/demot/

There should be everything you need to know if you are already familiar with css.. I noticed that your circles are overlapping each other if you put them in square.. sot therefor you need to use z-index on :hover if you want your circles to change color on :hover. Have fun! :D

Do you you plan on having hover effetcs on those circles? If not, then you don't have to slice 'em individually. And you can do it the other way round.. just leave those links unchanged.. just add one span inside them and position that span over your circle.

Yeah.. check out my example: http://www.dotcom.ms/demot/ and think a sec and you'll get it.

I'll give you a clue: Make sure your #links a ain't positioned at all and that the div#links is position: relative; then throw one empty span inside every a and that should be display: block; postion: absolute; ->> Then just throw in correct widths and heights and position them over the circles. Voila! Easy as taking popsicle from a baby with an axe. ;)

:D , Okay I will give it a go ......... I may be back!

Thanks for your help McJay