Hogyan kell ilyet csinálni?

ilyenre gondolsz?

html-része:

<img src="..." class="my_class>

css-ben:

.my_class

{

opacity:0.1;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=10)

}

.my_class:hover

{

opacity:1.0;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100)

}

A feladat megoldásához két kép kell: a kép színes és telítetlenné (szürkeárnyalatossá, fekete-fehérré) tett változatára.

Például itt egy kép:

[link]

aminek Gimppel megcsináltam a szürkeárnyalatos változatát:

[link]

A két kép közötti váltásra több megoldás is van.

Az egyik, hogy a képet egy link háttereként kezeled, és a link :hover szelektorára megváltoztatod a képet - lásd az alábbi példát:

[link]

A másik ("CSS image sprite"-nak hívják ezt a technikát), hogy egy képre

[link]

rakod mind a kettőt és váltáskor a háttér pozícióját módosítod:

[link]

A harmadik megoldás, hogy képként (<img> elem) használod, és Javascripttel az egérmutató képre való rámozdításakor (onmouseover), illetve a róla való elmozdításakor (onmouseout) megváltoztatod a kép src attribútumát:

[link]