[CSS] zmena farby obrazku po ukazani mysou

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod stando2002 6. 10. 2005 10:41

Cau,
da sa nejak spravit, aby obrazok po najeti mysi zmenil farbu (najlepsie pouzitim nejakeho filtra, napr. cierno-bieleho)?
Viem, ze sa to da pomocou javascriptu spravit tak, ze po najeti mysi sa jednoducho zmeni obrazok, ale to ja nechcem... Chcem aby moj obrazok iba zosedivel baz toho aby sa nacital nejaky iny. Neda sa to nejak napr. v CSS?
Dik

//adams: upraven název threadu.
stando2002
Junior
Uživatelský avatar

Odeslat příspěvekod Blko 6. 10. 2005 10:58

V IE by sa to dalo. IE ma nejake ficury, ktorymi by to asi islo urobit. Treba googlit. Napr.

http://msdn.microsoft.com/workshop/author/filter/filters.asp

Mozno by to islo urobit tak, ze cez obrazok preplacnes napr. div, ktoremu pri onmouseover zmenis farbu pozadia z transparent na nejaku konkretnu farbu a nastavis priehladnost (http://www.domedia.org/oveklykken/css-transparency.php). Treba vyskusat. Ale neviem, ci to vyriesi tvoj problem.


A preco to nemoze byt pomocou dvoch obrazkov? To by bolo asi nejjednoduchsie riesenie.
Blko
Junior
Uživatelský avatar

Odeslat příspěvekod Lemur 6. 10. 2005 11:03

Doporucuju pouzit dva obrazky. Je to o dost jednodussi a hlavne to bude chodit vsude. Filtry jsou IE-only a kdo vi, jesli je bude podporovat i IE7. Postup co popisuje Blko sice funguje, ale jenom u obrazku, ktere nemaji jemne prechody do pozadi, protoze ty by pri zmene barvy pusobili rusive, leda ze by se pouzily PNG a alfa kanal (a to zase neumi IE).
Lemur
VIP uživatel
Uživatelský avatar

Odeslat příspěvekod stando2002 6. 10. 2005 11:06

bolo by to size najjednoduchsie, ale tych obrazkov mam viac a uz teraz to ma dokopy skoro 100kB :(
stando2002
Junior
Uživatelský avatar

Odeslat příspěvekod HáRoš 6. 10. 2005 11:14

navždy mladý. navždy junior
HáRoš
Junior
Uživatelský avatar

Odeslat příspěvekod adams 6. 10. 2005 16:35

Ano, dá se to udělat přes CSS změnou parametru background-position.

viz http://wellstyled.com/css-nopreload-rollovers.html
-
adams
VIP uživatel
Uživatelský avatar

Odeslat příspěvekod Blko 7. 10. 2005 07:46

Toto riesenie ma tiez napadlo, ale ako som pochopil, tak problem je v tom, ze uz aj tak je tam tych obrazkov vela (vela kB). No a spojit tie dva stavy do jedneho ma, co do velkosti, asi to iste ako tam svihnut dva obrazky, pre jednotlive stavy.
Blko
Junior
Uživatelský avatar

Odeslat příspěvekod malcolmX 7. 10. 2005 07:59

Zkuste si pohrat s alfa kanalem (opacity)- bud na hover resp onMouseover udalost. MS IE bude vyzadovat trochu odlisny zapis nez treba Mozilla a Safari.
malcolmX
Junior

Odeslat příspěvekod psychocowboy 30. 10. 2005 15:17

toto nadefinujes v tagu head:

Kód: Vybrat vše
<style>
a.odkaz1 {background-image: url('staticky.jpg')}
a.odkaz1:hover {background-image: url('zmeneny.jpg')}
</style>

a ten odkaz hodis do tridy: <a class="odkaz1" bla bla...></a>...

Je to trochu slozitejsi, ale aspon nebudes mit problemy s ostatnimy prohlizeci, a je to bez filtra, ty sam si zvolis jak bude kazdy obrazek vypadat...

//kasli na to, ze to ma pres 100kb, kdyz to udelas pres jeden, neni to kompatibilni se vsemi prohlizeci...

//adams: na kód bych prosil používat tag [code].
psychocowboy
Junior
Uživatelský avatar

Odeslat příspěvekod mh 30. 10. 2005 16:14

tak sem nakonec pouzil tento kod: <a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img src="prvni.gif" name="obrazek">
</a>
ale jak nyni udelat, aby se hned(po dostazeni stranky) zobrazil obrazek a ne krizek, ktery se az po najeti mysi promeni v obrazek? ilustracni odkaz: http://evergreen.ic.cz/index1.htm
a pak taky, kdyz jich tam mam vic, tak musim zmenit atribut name="obrazek" napr na name="obrazek2", ze?
mh
Mírně pokročilý

Odeslat příspěvekod psychocowboy 30. 10. 2005 16:23

mas tam chybu:
Kód: Vybrat vše
...
     <p align="center">
<a href="http://kaleidoskop.ic.cz/"
onmouseover="document['obrazek'].src = 'images/kaleidoskopbig.gif' ;"
onmouseout="document['obrazek'].src = 'images/kaleidoskopsmall.gif' ;">

   


<img src="images/kaleidoskopnecotuchybi.gif" name="obrazek"></a></td>

Kód: Vybrat vše
      <td width="311" height="217">&nbsp;</td>
      </tr>
    <tr>
...


nemyslis? rekl bych ze tam ma byt kaleidoskopsmall.gif...
psychocowboy
Junior
Uživatelský avatar

Odeslat příspěvekod psychocowboy 30. 10. 2005 16:28

mh píše:a pak taky, kdyz jich tam mam vic, tak musim zmenit atribut name="obrazek" napr na name="obrazek2", ze?


jj :roll: :!:
psychocowboy
Junior
Uživatelský avatar

Odeslat příspěvekod mh 30. 10. 2005 16:34

no jo... to jsme my amateri, nejdriv kecame a pak myslime.... diky moc
mh
Mírně pokročilý


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků