Komentarze do: Efekt rollover w CSS bez przeładowywania obrazka http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/ we live, as we dream... alone - another devblog Mon, 16 Jan 2012 21:03:44 +0000 hourly 1 http://wordpress.org/?v=3.0.4 Autor: m1chu http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-12065 m1chu Fri, 26 Aug 2011 14:30:04 +0000 http://m1chu.eu/?p=50#comment-12065 <strong>@Michal:</strong> wrzuć linki w jakieś kontenery (listę ul -> li, dl -> dt/dd, czy chociażby w divy). Ustaw ich stylizację na <strong>display: inline;</strong>, a same odnośniki zostaw bez zmian. <strong>@mano</strong>: w tym wypadku nie trzeba. Grafiki ustawiasz przecież w kodzie HTML, wewnątrz znacznika <strong>a</strong>, jako <strong>img</strong>. Co za tym idzie ustawiasz je niezależnie od stylowania w CSS. Na pierwszy rzut oka więc rozwiązanie z arta powinno działać dla wielu poprawnie utworzonych odnośników, chyba że dany styl gdzieś po drodze nadpisujesz. Inaczej byłoby w wypadku, jeżeli zastosowałbyś ten efekt, ale bez znacznika <strong>img</strong>, a grafikę definiowałbyś jako (dla podwójnego obrazka o szerokości 400px, po 200px na efekt): [css]a { background-image: url('adres/obrazek_podwojny.png'); background-repeat: no-repeat; display: block; width: 200px; height: 150px; overflow: hidden; } a:hover { background-position: -200px; }[/css] @Michal: wrzuć linki w jakieś kontenery (listę ul -> li, dl -> dt/dd, czy chociażby w divy). Ustaw ich stylizację na display: inline;, a same odnośniki zostaw bez zmian.
@mano: w tym wypadku nie trzeba. Grafiki ustawiasz przecież w kodzie HTML, wewnątrz znacznika a, jako img. Co za tym idzie ustawiasz je niezależnie od stylowania w CSS. Na pierwszy rzut oka więc rozwiązanie z arta powinno działać dla wielu poprawnie utworzonych odnośników, chyba że dany styl gdzieś po drodze nadpisujesz.

Inaczej byłoby w wypadku, jeżeli zastosowałbyś ten efekt, ale bez znacznika img, a grafikę definiowałbyś jako (dla podwójnego obrazka o szerokości 400px, po 200px na efekt):

a {
    background-image: url('adres/obrazek_podwojny.png');
    background-repeat: no-repeat;
    display: block;
    width: 200px;
    height: 150px;
    overflow: hidden;
}
a:hover {
    background-position: -200px;
}
]]> Autor: Michal http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-12058 Michal Sat, 19 Mar 2011 14:51:54 +0000 http://m1chu.eu/?p=50#comment-12058 a co jesli chciałbym umiescic kilka takich linkow obok siebie ?jesli zmienie wartość display na inline to sie wszystko sypie.:( a co jesli chciałbym umiescic kilka takich linkow obok siebie ?jesli zmienie wartość display na inline to sie wszystko sypie.:(

]]> Autor: mano http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-12057 mano Fri, 18 Feb 2011 16:04:35 +0000 http://m1chu.eu/?p=50#comment-12057 Co należy zrobić aby podmiane przycisku zastasowac kilka razy na stronie z różnymi grafikami ? Trzeba gdzies dopisac id, class czy cos innego bo kombinuje i nic. Co należy zrobić aby podmiane przycisku zastasowac kilka razy na stronie z różnymi grafikami ? Trzeba gdzies dopisac id, class czy cos innego bo kombinuje i nic.

]]> Autor: Efekt rollover opatentowany | WebInfo http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-6761 Efekt rollover opatentowany | WebInfo Fri, 15 Oct 2010 23:00:17 +0000 http://m1chu.eu/?p=50#comment-6761 [...] Webvention Company, zaczęła rozsyłać informacje do administratorów stron wykorzystujących efekt rollover, iż łamią [...] [...] Webvention Company, zaczęła rozsyłać informacje do administratorów stron wykorzystujących efekt rollover, iż łamią [...]

]]> Autor: Efekt rollover w CSS bez przeładowywania obrazka - develway.pl http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-6278 Efekt rollover w CSS bez przeładowywania obrazka - develway.pl Tue, 21 Sep 2010 19:28:19 +0000 http://m1chu.eu/?p=50#comment-6278 [...] wiadomości z tego serwisu Follow us on Twitter 71 śledzących RSS Feed 394 czytelników Efekt rollover w CSS bez przeładowywania obrazka 1 głosuj! Rollover w światku tworzenia stron internetowych to efekt podmieniania danego [...] [...] wiadomości z tego serwisu Follow us on Twitter 71 śledzących RSS Feed 394 czytelników Efekt rollover w CSS bez przeładowywania obrazka 1 głosuj! Rollover w światku tworzenia stron internetowych to efekt podmieniania danego [...]

]]> Autor: m1chu http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-5139 m1chu Mon, 16 Nov 2009 12:49:58 +0000 http://m1chu.eu/?p=50#comment-5139 Nie próbowałem uzyskać nigdy tego efektu z animacją. Nie mniej jednak polega on tylko i wyłącznie na przesunięciu widocznej części tła lub marginesu. Teoretycznie więc, jeżeli zapętlisz animację (prawą część grafiki) to nie powinno być problemu z jej odtwarzaniem. Nie próbowałem uzyskać nigdy tego efektu z animacją. Nie mniej jednak polega on tylko i wyłącznie na przesunięciu widocznej części tła lub marginesu. Teoretycznie więc, jeżeli zapętlisz animację (prawą część grafiki) to nie powinno być problemu z jej odtwarzaniem.

]]> Autor: bart http://m1chu.eu/2008/07/08/efekt-rollover-w-css-bez-przeladowywania-obrazka/comment-page-1/#comment-5138 bart Sun, 15 Nov 2009 22:03:19 +0000 http://m1chu.eu/?p=50#comment-5138 A da się to zastosować do animowanego obrazku ? Np. obrazek 400px - lewa cześć 200px normalny statyczny obraz a druga animowany. Po zastosowaniu powyższego tutka animacja wyświetla się tylko 1 raz a zależało by mi na tym aby odtwarzana była za każdym razem po najechaniu gryzoniem. A da się to zastosować do animowanego obrazku ? Np. obrazek 400px – lewa cześć 200px normalny statyczny obraz a druga animowany. Po zastosowaniu powyższego tutka animacja wyświetla się tylko 1 raz a zależało by mi na tym aby odtwarzana była za każdym razem po najechaniu gryzoniem.

]]>