CSS - Krycie obrazka, przeźroczystym obrazkiem


(master of disaster) #1

Witam!

Mam przeźroczysty obrazek, w formacie png o wymiarach 1px x 1px i teraz chcę żeby po najechaniu na niektóre obrazki, ten mój o wymiarach 1px na 1px przykrywał inny czyli efekt był by taki jak "krycie".

Trochę to zagmatwane ale myślę że ktoś mi pomoże...

Pozdrawiam


(Spam) #2

Musisz wygenerować sobie dodatkową warstwę nad obrazkiem i wypozycjonować ją absolutnie względem danego obrazka. Warstwę najlepiej utworzyć za pomocą generowanej zawartości (generated content), a dla IE oczywiście konieczne będzie zastosowanie expressions – będziesz musiał wygenerować na przykład element DIV za pomocą pseudokodu JavaScript.

Potem już tylko ustawienie tła dla nowego elementu-warstwy. Dla IE6 będziesz musiał zastosować odpowiedni filtr, jeśli kanał alfa nie będzie poprawnie wyświetlany. I gotowe :wink:

Jeśli jednak tło ma być wyświetlane tylko po najechaniu myszą na element, to oczywiście musisz pamiętać o pseudoklasie :hover i kluczu zachowań (csshover.htc) dla IE6, który :hover obsługuje tylko na odnośnikach.


(master of disaster) #3

hmm mógłbyś mi to pokazać na przykładzie (kod) ?

nigdy nie używałem warst w css

Pozdrawiam :slight_smile:


(Spam) #4

adpawl , dodatkowy markup to zło, a zatrudnianie do tego PHP to zło do kwadratu.

Jeśli faktycznie chodzi o „blokadę” możliwości pobrania obrazka, to polecam:

http://perfectionorvanity.com/2006/07/1 ... -znak-wod/


(master of disaster) #5

Nie nie chodzi mi o blokadę obrazka chodzi mi po prostu o taki efekt...

Mógłby mi ktoś pokazać przykład jak to zrobić ?


(Spam) #6

http://pastie.org/private/x3ir3op2m36lez54kbuucq

Poprawny HTML5, ale bez hacków dla IE.

Obrazkiem jest logo forum, a przezroczysta warstwa to po prostu blok wypełniony kolorem z nadanym opacity.

Wykorzystałem DIV, bo Gecko miało problemy z działaniem bezpośrednio na IMG.

Działa w Operze/Safari/Chrome/Firefoksie.


(master of disaster) #7

O.K Wasacz , Dzięki Wielkie!

Jeszcze tylko 1 pytanie :slight_smile: :

Można tak zrobić żeby ten kolor zakrywał 100% powierzchni obrazka, (jak jest mniejszy to mniejsze, jak większy większe) ?

Dzięki

Pozdrawiam


(Spam) #8

A to nie zakrywa? :wink:

Albo ja czegoś nie rozumiem.


(master of disaster) #9

(Spam) #10

To chyba logiczne, że przykładowe wymiary 200x80 pikseli powinieneś zamienić na własne, czyli 98x73…


(master of disaster) #11

OK zrobiłem to tak:

|
1
|
2
|
3
|
|
4
|
5
|
6
|[/code]

Czy jest możliwość żeby jeszcze w IE to działało (jeżeli to mają być jakieś duże skrypty to nie bo aż tak to mi na tym nie zależy :wink: )


(adpawl) #12

Pozwoliłem sobie usunąć swoje posty i wynikłe z tego ot'y, bo wyraźnie "kogoś" drażniły przykłady alternatywnych rozwiązań tytułowego problemu, jakich znacznie więcej można znaleźć w sieci.

Nie mam zamiaru wdawać się w zbedne dyskusje, przeżucać argumentami i bawić w naciągane wyliczanki ...by tylko narzucić "jedynie słuszne" rozwiązanie.


(Spam) #13

http://stuff.wasacz.net/xhtml/img-hover/

Działa na praktycznie każdej przeglądarce: IE6, IE7, IE8, Opera, Safari, Chrome, Firefox etc.

Małe wyjaśnienie: generowany dla IE element ma nazwę GC dlatego, aby przypadkiem nie dostał niepotrzebnej właściwości CSS :wink:

Odnośnik do pobrania całości w formie archiwum ZIP na stronie przykładu.

Licencja: CC BY-NC-SA 2.5 PL.


(master of disaster) #14

THX Wasacz , bardzo mi pomogłeś :slight_smile:

Pozdrawiam