Obrazek sprite jako link


(Piotrek Płatek) #1

Witam,

chcąc stworzyć strzałkę (np do slidera) ( z efektem rollover) stanąłem przed dylematem jak go zapisać.

  • teraz nie wiem jak by użyć sprite (przesuwania tła)

albo puste > - to nie będzie poprawne według walidatora.

Jak to najlepiej zapisać ? Chodzi o to, że chyba trzeba by przypisać do czegoś tło żeby móc je podmienić dla :hover.

Pozdrawiam


(adpawl) #2

dla A dajesz display: block; i text-indent: -10000px; , w tle linka dajesz sprite'a -w srodku możesz coś napisać, nie będzie tego widać.

możesz też wstawić 1x1 transparentnego gifa, albo cokolwiek np. spana - któremu możesz dać display:none;

Możliwości jest wiele.


(Drobok) #3

link

a img{

background:url(image.gif') -47px 0;

}

a img:hover{

background:url(image.gif') 0px 0;

}

?? :slight_smile:

http://www.w3schools.com/css/css_image_sprites.asp

//zapomniałem dać alt


(Piotrek Płatek) #4

Dzięki za odpowiedzi. W prestashop jest tak:

strzalka


a {

  text-indent: - 10000px;

 display:block;

}[/code]

Chyba najprostszy sposób.


(cinkibolek) #5

Tak najlepszy, daj też normalny link tekstowy, z prawdziwym tekstem a nie byle co, nie będzie go widać (tekstu) bo zostanie podmieniony w css na obrazek, ale tak jest bardziej prawidłowo aby link był normalny tekstowy też.


(Drobok) #6

Jak gość będzie miał wyłączone grafiki to i tak nic nie zobaczy, więc sensu tego wg mnie nie ma :stuck_out_tongue:


(cinkibolek) #7

Też dlatego najlepiej tak jak napisałem wyżej, normalny link tekstowy + obrazek ustawiony na tag a w css.


(soanvig) #8

W prawo
[/code]

Tak jest najlepiej. Użytkownik widzi strzałę w prawo (background), wszelkie czytniki czytają "w prawo". Metoda left: -X, nazywa się Off-left. Chcesz to poszukaj o tym. A wszystkie dodatkowe parametry są po to, żeby czytniki na pewno mogły działać, a przeglądarki nie sypały artefaktami.


(Drobok) #9

Znów swojego spana przeciągasz, po czym w wypadku braku obrazków w przeglądarce, user zostaje z niczym. Bynajmniej tak to na pierwszy rzut oka wygląda :slight_smile:


(soanvig) #10

Skoro tak się upieracie, to najlepiej wstawić normalnie obrazek, a :hover robić za pomocą JS, bo skoro i tak już się go używa, żeby obsługiwać slider, do którego miałaby być dołożona ta strzałka, to można go użyć to zmiany obrazka po najechaniu.

W twoim sposobie też użytkownik pozostanie bez obrazka, więc koniec końców nie da się tego optymalnie zrobić. Bo co do tego powyżej - tak, jeśli użytkownik wyłączy JS to nie będzie działać. Nie można więc zawsze zakładać skrajnych przypadków.

Jedyne sensowne rozwiązanie w takim razie się wydaje następujące:

narysować tą strzałkę w CSS. Ale - oczywiście - jest to wtedy niepoprawne, bo otrzymamy puste elementy.


(Drobok) #11

Gdy w a jest obrazek, który jest wyłączony. To powinien mu się pojawić napis alt, który jest linkiem.


(soanvig) #12

Cyk cyk, zapomniałem o alcie :slight_smile: