Control div content with separate links

[richiebman]

Hello all.

Been trying to work this out but can't. I think it must be possible though as it can be easily done in Javascript.

I have some links on a page and a div. The links aren't inside the div as they are positioned on different sides of the page. When the user puts the mouse over a link, I want the image to change inside the div.

I can do this in Javascript, and I can do a similar thing with css and divs, but only when the link or object that I have designated as a link (using display:block; etc), is inside the div.

So I need to be able to call on the div probably using <div id="etc... ??? I have never needed to use div id and so am unsure how to reference them in css.

I have exactly what I need working in Javascript already, but I need to do it with css and divs as I need the image names in the stylesheet. This is because I am trying to set up a 'changing the color theme' thing for the user. I do this by using different stylesheets and cookies. Therefore if the image name is in the html, upon colour change, the image obviously doesn't change which is what I needed it to do.

Hope you can help and thanks in advance,
R

[ronaldb66]

I haven't tried this yet, but I think if you can make the images you wish to display a part of the links in some way or another and absolute position that over the div, you could use the :hover pseudo-class to create such an effect. The other way around may be possible as well: place the links and the images in the div, and then position the links away.

If I recall correctly, a similar effect was used on AdaptivePath (http://www.adaptivepath.com/) (about halfway on the front page, to the left: browse over the list of names and see their faces change from b/w to color); maybe you could get some inspiration there.

[richiebman]

Hi Ronald,

The Adaptive Path example is exactly what I'm looking for. Unfortunately I tried to read their css through the temp files folder and they are importing it. Therefore I can't see how they're doing it. They're not using javascript so it has to be with css and divs.........but I still can't work it out.

Anyone know how they're doing it?????

Cheers,
R

[Hurstool]

It looks like you would just add /css/basic.css after their .com address

[richiebman]

Excellent Hurstool. Will have a look into that.
R