CSS: Hover przy użyciu dwóch obrazków

Na swojej stronie mam wstawione podlinkowane obrazki partnerów. Chciałbym aby po najechaniu na taki obrazek zmieniał on swoją zawartość na inny obrazek. Nie bardzo jednak wiem jak na tag <img> nałożyć hover.

Dzięki. Działa. Można zamknąć.

Zdecydowanie nie!

Swoją drogą tutaj obrazek nie będzie linkował linkiem z 'a hrefa'

Po 1. hoverów nie robi się na różnych obrazkach - wyobrażasz sobie sytuację że ktoś robi hovera, serwer/internet ma powiedzmy czkawkę, przez co odwiedzający przez jakiś czas nie widzi ani starego, ani nowego obrazka

Po 2. Co jeżeli obrazki mają różne rozmiary? To już lepiej zrobić to w js:

<img id="obrazek" src="obrazek1.png" data-hover="obrazek2.png" />
<script>
$('#obrazek').hover(function(){
  var img = $(this).attr('src');
  $(this).attr('src', $(this).attr('data-hover') );
  $(this).attr('data-hover',img);
},function(){
  var img = $(this).attr('src');
  $(this).attr('src', $(this).attr('data-hover') );
  $(this).attr('data-hover',img);
})
</script>

 

 

Po 1. hoverów nie robi się na różnych obrazkach - wyobrażasz sobie sytuację że ktoś robi hovera, serwer/internet ma powiedzmy czkawkę, przez co odwiedzający przez jakiś czas nie widzi ani starego, ani nowego obrazka

Właśnie, lepiej gdyby to było w jednym pliku graficznym. Ale jak już się uprzemy to pamiętać należy, aby obrazek był zapisany z przeplotem (png) lub progresywnie w jpg.

Zawsze mnie to wkurza, gdy grafika ładuje się od góry do dołu. 

Wolałbym dwa obrazki z racji tego, że nie uda mi się takiego efektu osiągnąć css. Java scriptu nie znam i nie bardzo rozumiem kod przesłany przez unbreak.

Jakiego efektu?

A jak mam przykładowo box z partnerami na forum. Domyślnie chcę, żeby były wszystkie w kolorze jasnoszarym, a po najechaniu żeby pokazywały się w pełnym kolorze jak na obrazku. Da radę to w css? Próbowałem nałożyć kolor, ale to obrazki w .png bez tła,  a kolor nakładał się na cały obszar obrazka, czyli na pełen prostokąt.

Np: https://github.com/j...query-grayscale

Np: https://github.com/j...query-grayscale

Z tego co pamiętam to oczywiście że tak

Np: https://github.com/j...query-grayscale

A jak tego użyć? Tam pisze, że tak:

 

$('img').grayscale();

Co mam wstawić zamiast 'img' ? ID obrazka? klasę daych obrazków jeśli mam kilka? Bo nie chce działać

Wszystko zależy jakie masz źródło html.

Najpewniej przy takim htmlu:

<img src="obrazek1.png" alt="" class="clasa_obrazkow" />
<img src="obrazek2.png" alt="" class="clasa_obrazkow" />
<img src="obrazek3.png" alt="" class="clasa_obrazkow" />
...

będzie to coś w rodzaju:

$('img.clasa_obrazkow').grayscale();