Powiększanie awatarów po wskazaniu kursorem
3.0.0.51 8
Po wskazaniu kursorem awatara w oknie kontaktów, rozmowy, czy w centrum powiadomień, ulega on powiększeniu. Aby powiększenie działało, należy elementom, w których znajdzie się awatar, dodać wywołanie funkcji Avatar.zoom z parametrem this w zdarzeniu mouseenter. To w zasadzie jedyne, co należy zrobić. Wywołanie to zatem należy umieszczać w plikach:

Contacts/Item.htm

News/Item.htm

Message/in.htm

Message/out.htm



Jeżeli nie odpowiada Ci wizualnie wygląd awatara po powiększeniu, możesz na niego wpłynąć z poziomu stylów CSS, posługując się specjalnymi klasami. Poniżej przedstawiamy strukturę powiększonego awatara, z której wynikają znaczenia definiujących te elementy klas CSS:

Internet Explorer 8:

<DIV class="-s-avatar-tooltip">
<DIV class="-s-avatar-bg"></DIV>
<IMG src="" class="-s-avatar-image"/>
<DIV class="-s-avatar-fg">
<TABLE class="-s-avatar-table">
<TR class="-s-avatar-top">
<TD class="-s-avatar-left"></TD>
<TD class="-s-avatar-center"></TD>
<TD class="-s-avatar-right"></TD>
</TR>
<TR class="-s-avatar-middle">
<TD class="-s-avatar-left"></TD>
<TD class="-s-avatar-center"></TD>
<TD class="-s-avatar-right"></TD>
</TR>
<TR class="-s-avatar-bottom">
<TD class="-s-avatar-left"></TD>
<TD class="-s-avatar-center"></TD>
<TD class="-s-avatar-right"></TD>
</TR>
</TABLE>
</DIV>
</DIV>

Internet Explorer 9+:

<DIV class="-s-avatar-tooltip">
<DIV class="-s-avatar-bg"></DIV>
<DIV style="background-image: url('')" class="-s-avatar-image"></DIV>
<DIV class="-s-avatar-fg"></DIV>
</DIV>

Nie należy ustawiać własności transition-property dla elementu .-s-avatar-tooltip, ponieważ przebieg animacji powiększania awatara jest z góry narzucony. Animowane są własności: opacity, width, height, left oraz top.

Zwróć uwagę, że powiększony awatar może czasem dotykać wewnętrznych krawędzi okna w sytuacji gdy nie może on znaleźć dla siebie wystarczająco dużo miejsca. Wówczas jeżeli powiększony awatar posiada wokół ramkę, zostanie ona ucięta z tej strony, z której awatar dotyka krawędzi. Aby tego uniknąć, zdefiniuj właściwość padding dla klasy .-s-avatar-padding. Pamiętaj, że wartość tej właściwości na potrzeby funkcji powiększenia awatara, musi być podawana w pikselach logicznych.