Zaloguj się

wezar · 30-08-2012, 18:38

Witam
mam parę obrazków które po naciśnięciu prowadzą na odpowiednie strony
w tej chwili zastosowałem skrypt który zamienia wszystkie je na czarno białe a po najechaniu na dany rysunek zamienia się na kolorowy, chciałbym aby wszystkie docelowo były kolorowe a po najechaniu na jeden on zostawał kolorowy a wszystkie pozostałe zamieniały się na czarno-białe, może nie całkowicie globalnie bo chodzi mi tylko o menu

teraz mam taki kod:[/code]

img.gray {

filter: url(filters.svg#grayscale); /* Firefox */
filter: gray; /* IE */
opacity: 0.25;
-webkit-filter: grayscale(1); /* Webkit */
}

img.gray:hover {
filter: none;
-webkit-filter: grayscale(0);
opacity: 1;
color: gray;

}
</style>
<img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray>
<img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray>
<img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray>
<img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray>
<img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray>

wezar · 31-08-2012, 15:16

Witam

Dzięki wielkie z tym że mi to nie działa możliwe ze nie bardzo umiem zastosować bibliotekę jq.

teraz mam taki pełny kod:

Kod:
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

<style type="text/css">

.not-grey{

 filter: none;

 -webkit-filter: grayscale(0);

 opacity: 1;

 color: gray;

 }

 .grey{

 filter: url(filters.svg#grayscale); /* Firefox */

 filter: gray; /* IE */

 opacity: 0.25;

 -webkit-filter: grayscale(1); /* Webkit */

 }

</style>

 <script>

$(".grey").each(function(){

   $(this).hover(function(){

     $(".grey").not(this).removeClass(".grey").addClass(".not-grey");

   });

 });  

</script>

</head>

<body>

<a href="#"><img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray></a>

<a href="#"><img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray></a>

<a href="#"><img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray></a>

<a href="#"><img src="http://i.imgur.com/M5TIb.jpg" width="300" class=gray></a>

</body>

</html>

**Kartofelek** · 31-08-2012, 15:50

A czy to aby nie powinno działać tak:

Kod:
$(function() {

     $('.grey').hover(

          function() { $(this).toggleClass('grey not-grey'); }, 

          function() { $(this).toggleClass('grey not-grey'); }

     );

});

Ale filtry zadziałają tylko w naprawdę nowych przeglądarkach. Ja osobiście bym to zastąpił canvasem (co nie jest trudne). Ale to już na googlach poszukaj canvas grayscale on hover czy coś podobnego

wezar · 31-08-2012, 17:08

Niestety nie działa, faktycznie na necie jest bardzo dużo typu skryptów, ale ona reagują tylko na elementy na które najeżdżam, a nie odwrotnie. czyli przycisk jest kolorowy a pozostałe class=gray, albo robią się czarno białe albo rozmyte i z alfą
zamieszam mój plik może u was zadziała. pliss bo nawet nie wiem jak tego rozwiązania szukać po polsku a dopiero po angielsku

**Kartofelek** · 31-08-2012, 17:36

Ale w końcu grey czy gray? Smile

wezar · 31-08-2012, 18:14

(31-08-2012, 17:36)Kartofelek napisał(a): Ale w końcu grey czy gray?

gray

**Kartofelek** · 31-08-2012, 19:21

A w kodzie masz obie wersje

wezar · 31-08-2012, 19:23

(31-08-2012, 19:21)Kartofelek napisał(a): A w kodzie masz obie wersje

Już zauważyłem błąd ale nie działa w dalszym ciągu Sad

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie