Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
[css] zmiana zdjęć z kolorowych na czarno-białe? - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] zmiana zdjęć z kolorowych na czarno-białe? (/thread-css-zmiana-zdjec-z-kolorowych-na-czarno-biale)



[css] zmiana zdjęć z kolorowych na czarno-białe? - pyzy - 08-06-2010

Witam wszystkich,
mam problem ze zmianą zdjęć z kolorowego na czarno-białe. Chodzi mi o :hover przy najechaniu myszą - z kolorowego rob się czarno-białe. Oczywiście można sobie poradzić w css zapisując każde zdjęcie jako osobny styl np...:
Kod:
tr td#button {
float: left;
width:144px;
height:30px;

}

tr td#button a {  
display:block;
width:144px;
height:30px;
background:url(active.png) no-repeat;
padding: 3px 0px 2px 0px;
font: normal 18px bold Verdana,Arial, sans-serif;
color:#cccccc;
text-decoration:none;
text-align: center;

}
tr td#button a:visited {
color:#cccccc;
}

tr td#button a:hover {
background: url(hover.png) no-repeat;
color:#333333;
width:144px;
height:30px;
}

..i przypisywać tylko do nowego odnośnika inny obrazek przy :hover.
Chodzi mi o globalnie zdefiniowanego css'a, który będzie zmieniał obrazek z koloru na czarno-biały przy najechaniu kursorem. Wiem, że jest skrypt javy ale czy komuś może udało się wykonać taki efekt w css bez definiowania osobnego stylu dla każdego zdjęcia.
Z góry dzięki za pomoc

Ps: google też wykorzystałem zanim napisałemSmile


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Leja - 08-06-2010

Ja robiłem kiedyś tak no ale ja miałem 2 zdjęcia kolorowe i czarno białe i najechałem na kolorowe i było czarno białe. Chodzi mniej więcej o coś takiego: http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css . Pozdrawiam


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - pyzy - 08-06-2010

(08-06-2010, 01:39)Leja napisał(a): Ja robiłem kiedyś tak no ale ja miałem 2 zdjęcia kolorowe i czarno białe i najechałem na kolorowe i było czarno białe. Chodzi mniej więcej o coś takiego: http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css . Pozdrawiam

Wiem, tak też podałem. Można zrobić przy niewielkiej ilości zdjęć ale w momencie kiedy tych zdjęć jest około 80 to zaczyna się problem. Oczywiście można zrobić 80 odrębnych stylów ale po co?!....
Dzięki za odpowiedzi


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Zikerek - 10-06-2010

Polecam prosty javascript, ktory uruchamiasz po najechaniu na zdjecie, a ktory podmienia zrodlo zdjecia (bo rozumiem, ze masz zdjecie i czarno-biale i kolorowe? inaczej nie widze opcji), a po zjechaniu zmienia zdjecie spowrotem. Zeby uzyc jednego skryptu dla wszystkich zdjec musialbys usystematycznic nazewnictwo, tj. kazde czarnobiale zdjecie mialoby taka nazwe jak oryginal z dopiskiem powiedzmy _cz i wtedy tylko w JS do obecnego src zdjecia dopisywalbys _cz i je usuwal po zjechaniu z obrazka ;>


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Leja - 10-06-2010

Właśnie nasz kolega nie chce tak, ma tylko jedno zdjęcie. I też myśle że jest to nie możliwe.


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Kamil - 10-06-2010

Jedyne rozwiązanie jakie ja tu widzę to użycie jQuery i napisanie prostego skryptu, który będzie odpowiadał za zaciemnianie (opcity) po najechaniu na obrazek.

@Zikerek
Twój sposób to czysty rollover w CSS'ach wykonywalny bez zbędnego JavaScript'u


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - pyzy - 10-06-2010

(10-06-2010, 02:10)Leja napisał(a): Właśnie nasz kolega nie chce tak, ma tylko jedno zdjęcie. I też myśle że jest to nie możliwe.

LOL. Oczywiście, że mam 2 zdjęcia - kolorowe i czarno-białe. Bez tego opisane moje wcześniejsze rozwiązanie nie miałoby sensu - żeby zadziałał :hover musi być inne zdjęcie podmieniane w background - ale mniejsza o to.
Z Waszych wypowiedzi wynika, że bez javy się nie obejdzie..tak też myślałem..ale cóż warto było zapytać..
Dzięki


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Leja - 10-06-2010

Ja bym to robił w CSS mniej *** i wszystko będzie tak samo.


RE: [css] zmiana zdjęć z kolorowych na czarno-białe? - Zikerek - 10-06-2010

(10-06-2010, 19:07)Leja napisał(a): Ja bym to robił w CSS mniej *** i wszystko będzie tak samo.

no nie wiem czy przy powiedzmy 40 zdjeciach bedzie to mniej pracy niz uzycie jednego JS ;]