Duotone images on mouse over

Hello

I want to copy the effect on this page whereby black and white images change to colour on mouse over. Does anyone know how it is done?

http://www.sussex.ac.uk/

thanks

Dan

a start..

http://www.alistapart.com/articles/rollovers/

http://www.alistapart.com/articles/domtricks2/

Simple. You just take a copy of the colour image and make it greyscale in any decent picture editing program (Photoshop, Paint Shop Pro etc). Then on your webpage use javascript to update the background-image with the URL of the colour image, not forgetting the mouseout which swaps them back again...

ok, those tutorials involve code, so im not very good in that department, but i do my roll overs in adobe image ready, simple the button you want to change, u need to duplicate it so you have the original, and the over. when slicing it, select the slice with with the button in, then in the web pallette (window > webpallette, i think) rite click on it and click "Add roll over state" in the the roll over state make it so the roll over is showing. Any problems and i didnt explain to good pm me

*Edit* I am happy to write a full tut with images if need be *Edit*

Edited by Conneh (Tue 06-Jun-06 22:01:31)

i don't think you understood what the op is asking for. roll overs for the same image are easy enough to do, the op wants roll overs to be enabled when they mouse over a different element,

mouse over link -> related image rolls over as opposed to, mouse over link -> link image changes

see?

I thought it was a rollover of the image selected going by the link provided.

Not always. Their website is rather inconsistent - 3 of the 6 images do change when you mouseover them, the whole article seems to trigger the effect. The other 3 images only change when you mouseover one of the links within the article.

It's the second effect that I think the OP is asking for. It can be accomplished quite easily using the following javascript on mouseover of the link text:

document.getElementById('image_tag_id').style.backgroundImage='url(color.jpg)';

and then on mouseout:

document.getElementById('image_tag_id').style.backgroundImage='url(blackwhite.jpg)';

Where image_tag_id is the ID value of the image that you want to change. Example HTML snippet:

<a href="link_target.htm" onmouseover="document.getElementById('myImage').style.backgroundImage='url(color.jpg)';"

 onmouseout="document.getElementById('myImage').style.backgroundImage='url(blackwhite.jpg)';">link text</a>



...



<img id="myImage" src="blackwhite.jpg" />

Probably more elegant to write a javascript function, but the above should work as an example.

Ok it seems i have got a tad confused. So this is not what you mean

http://con.neronix.com/Rollovers/index.html