rebarveni obrazku

Zdravim chtel jsem se zeptat jak udelat to kdyz clovek najede na obrazek aby se jakoby odbarvil treba do hnede barvy.Diky moc za pomoc

filtrem(jen pro IE)pro tzv. pruhlednost obrazku. Je to asi nejjednodusi moznost:

do hlavy das skript:

<script language="JavaScript" type="text/javascript">
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=85
else
cur.filters.alpha.opacity=50
}
</script>

a do obrazku pak funkci onmouse asi takto:

<img src="adresa obrazku" style="filter:alpha(opacity=50)" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)" alt="xxx">

S cislama si pohrajes jak potrebujes.

Jinak pruhlednost jde udelat i pro ostatni prohlizece obrazkem png pro IE a pak to muzes nastylovat. Nekde jsem cetl na to hack. Je to predelany "The GIR Image Replacement Technique" http://www.jasonkarldavis.com/articles/gir/

* html .gir {
background-image: expression(this.innerHTML += '<div class="gir"></div>', this.runtimeStyle.backgroundImage = "none");
}

je to prakticky js v css a stranku jsem na to videl na http://xy.wz.cz/a.php

v tretim pripade to lze nadefinovat i treba takto:

IMG.item {
BACKGROUND-IMAGE: url("obrazek.jpg");
COLOR: black
}

v tomto pripade ale musis ulozit prvni a druhy obrazek do jednoho obrazku tak, aby byly vedle sebe (vyborne na nacitani) takze priklad:

"obrazek-hnedy.jpg" + "obrazek-odbarveny.jpg" = "obrazky-vedle-sebe-v-jedne-lajne.png"

IMG:hover {
BACKGROUND-POSITION: -200px 0px;
COLOR: black;
DISPLAY: block;
}

timto zpusobem se vlastne obrazek posouva (-200px je sirka o kolik se posune(neni mozne zpozorovat))

Doufam, ze to mam dobre, kdyztak me nekdo opravte ;)