Skocz do zawartości


tablety.pl
Zdjęcie
- - - - -

Wstęp do overlibmws - wizytówka forum




  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu

#1 Kolega Dudysa

Kolega Dudysa

    Good Rank

  • Na emeryturze
  • 700 postów
  • Płeć:Mężczyzna

Napisano 17 07 2008 - 09:02

Witam. Chciałbym Wam zaprezentować drugą rodzine tooltipów overlib, mianowicie overlibmws. Na podstawie tych że skryptów można stworzyć naprawde piękne tooltipy, proste, jak i rozbudowane i dość skomplikowanej budowy. Nowa odsłona pozwala na dodawanie styli css z zewnetrzego arkusza styli, w pierwszej wersji overlib był do tego potrzebny oddzielny skrypt overlib_cssstyle oraz polecenia, które ładują klasy css i w drugiej odsłonie pozostały te same. Możliwość tworzenia od jednego do kilkunastu tooltipów w głównym. Zostały dodane efekty pojawiania się okna jak i jego zanikania, jest ich około 100 rodzaji oraz wymuszanie ręcznego zamknięcia dla otwarcia nowego czy wydruk tooltipa, itp. Strona główna overlibmws. Downland znajduje się na samej górze strony.


Prezentacja pierwsza
Dołączona grafika
overlibmws+html+css


Jak wiadomo ten rodzaj Webdesingu niesie czasem za sobą większą ilość kodu na stronie, ale i na to jest rada. Jednak coś za coś, mowa tu o rozbudowanym tooltipie. Możliwości konfiguracyjne są, jak ustawienie globlanych styli na stronie czy ustawienie własnej konfiguracji w samym skrypcie overlibmws czy też stworzenie tablic ze stylami. Główny skrypt overlibmws, a własciwie jego polecenia nie zmieniły się składniowo co do pierwszej odsłony overlib, także osoby, które mialy już do czynienia nie będą miały większego problemu, natomiast znalazło się kilka nowych poleceń. Myśle że dobrym przykładem jest prezentacja wizytówki, coś co jest dobrze znane, ale wciąż poznawane. Więc osoby, które mają ochotę się w to pobawić, zapraszam do testowania. Jedną z najlepszych cech overlibmws jest ich dynamika oraz potężne możliwości w tworzeniu i to że są free. Więc!

Co posiada tooltip?
  • możliwość przesuwania głównego okna po ekranie, chwytając go lewym przyciskiem myszki
  • wewnętrzne tooltipy z opisem subfor
  • efekt przeźroczystości
  • efekt pojawiania się i zanikania
  • style css z możliwością własnej konfiguracji
  • pseudoklasy css dla odsyłaczy, które nie kolidują ze stylami na stronie
Tooltip może sie wydawać mało atrakcyjny, ale ma oddać klimat.

Budowa. Jeśli pobraliście paczke skryptów ze strony producenta to będą Wam potrzebne cztery skrypty:
  • overlibmws.js
  • filter.js
  • draggable.js
  • overtwo.js
Następnie trzeba je zagnieździć w sekcji HEAD:
<script type="text/javascript"  src="overlibmws.js"></script>

Pod BODY wstawić warstwe:
<div id="overDiv" style="position:absolute; visibility:hidden;z-index:1000"></div>

oraz reklame wydawcy w komentarzu:
<!-- tooltip Copyright Foteos Macrides 2002-2008 -->

Zewnętrzny arkusz styli. Style:
a.more:link {
color: red; 
text-decoration: none;Font-size:12px; 
Font-family: Arial;  
}
a.more:visited {
color: #996699; 
text-decoration: none;Font-size:12px; 
Font-family: Arial; 
}
a.more:hover {
color: #996699; 
text-decoration: none;Font-size:12px; 
Font-family: Arial; BORDER-BOTTOM: red 1px dotted; 
}
.srodek {
	  BORDER-RIGHT: #99ccff 1px dashed; PADDING-RIGHT: 2px; 
	  BORDER-TOP: #99ccff 1px dashed; DISPLAY: block; PADDING-LEFT: 2px;
	  BORDER-LEFT: #99ccff 1px dashed; 
	  BORDER-BOTTOM: #99ccff 1px dashed; 
	  FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 2px 2px 2px 2px; 
	  FONT-STYLE: normal; TEXT-ALIGN:left;  
	  FONT-FAMILY: 'verdana,sans-serif'; COLOR: white; PADDING-TOP: 2px;  BACKGROUND-COLOR: #99ccff;
}

A.klasa:link {
  FONT-SIZE: 20px; text-decoration: none;COLOR: red; 
}
A.klasa:hover {
  FONT-SIZE: 20px; COLOR: orange; text-decoration: none; BORDER-BOTTOM: red 1px dotted;

Zewnętrzna budowa tooltipa. Gdzieś na stronie, np. ukryć to w jakimś wyrazie:
<Q  onmouseover="return overlib(wiz,ABOVE,CAPTIONPADDING,7,CENTER,BASE,0,STICKY,DRAGGABLE,TEXTSIZE,'19px',WIDTH,500,BORDER,2,
BGCOLOR,'#333399',FGCOLOR,'white',CAPTION,'<center>P2P & Wyszukiwarki & Windows & Hardware </center>',CLOSECLICK,CLOSETEXT,'X',CLOSEFONTCLASS,'klasa',CLOSETITLE,'Klikni by zamknąć',TEXTFONT,'Arial',FILTER,FADEIN,49,FADEOUT,48,CAPCOLOR,'white',CGCOLOR,'#8E6B23',
STATUS,'SearchEngines');" onmouseout=nd(); >słowo</Q>


Pobierz - Wizytówka.rar

-----------------------------------------------------------------------------------------------------------------------



Prezentacja druga

Dołączona grafika


O to następna prezentacja tooltipa, jest już prostrzej budowy. Do pełnego działania jest potrzeby tylko skrypt overlibmws.js. Ustawiony tak, aby pojawiał się nad najechanym obiektem, centralnie. Stosowany do odsyłacza, reakcja nastąpi po najechaniu na obiekt, po opuszczeniu znika. Brak efektów pojawiania się i zanikania.

Budowa:

Skrypty zagnieździć w sekcji HEAD:
<script type="text/javascript"  src="overlibmws.js"></script>

Otworzyć notatnik, a w nim zapisać budowe wewnętrzną. Zapisać jako js i następnie zagnieździć w sekcji HEAD:
var se='<center><b>Forum SearchEngines</b></center>'
+'<img width="314" height="214"  hspace="10" vspace="10" align="enter" '
+'src="se.png" border="1" >';

Pod BODY wstawić warstwe:
<div id="overDiv" style="position:absolute; visibility:hidden;z-index:1000"></div>

oraz reklame wydawcy w komentarzu:
<!-- tooltip Copyright Foteos Macrides 2002-2008 -->

Następnie, gdzieś na stronie umieścić budowe zewnętrzną w odsyłaczu:
<a href="http://searchengines.pl/" target="blank" onmouseover="return overlib(se, ABOVE, CENTER, FGCOLOR,'#e5f3ff', TEXTPADDING,2,BORDER,2,TEXTFONT,'Arial', TEXTSIZE,'12px', BASE,3)" onmouseout="return nd();">
   Klik</a>

Gotowa próbka z grafiką - Wiz.rar

-----------------------------------------------------------------------------------------------------------------------



Prezentacja trzecia
Dołączona grafika
Pobierz prezentacje - prezentacja3.rar


Można tego tooltipa traktować jak szybkiego linka, zawiera linki do wszystkich działów forum. Tooltip po najechaniu na obiekt pojawia się powyżej z prawej strony, chywtając lewym przyciskiem myszy można nim manipulować po ekranie. Brak zamknięcia, ale następują dwie rekacje:

- tooltip po zjechaniu z obiektu zniknie po czterech sekundach
- po zejściu kursora z tooltipu, znika

Do poprawnego działania potrzebne są trzy skrypty overlibmws:
  • overlibmws.js
  • overtwo.js
  • draggable.js
  • oraz skrypt wewnętrznej budowy
Skrypty zagnieździć w sekcji HEAD:
<script type="text/javascript"  src="overlibmws.js"></script>

Pod BODY wstawić warstwe:
<div id="overDiv" style="position:absolute; visibility:hidden;z-index:1000"></div>

oraz reklame wydawcy w komentarzu:
<!-- tooltip Copyright Foteos Macrides 2002-2008 -->

Gdzieś na stronie zewnetrzną budowe umieścić w odsyłaczu lub wyrazie:
<a href="http://searchengines.pl/" target="blank" onmouseover="return overlib(se1, WIDTH,50, RIGHT,ABOVE, FGCOLOR,'silver',NOCLOSE,STICKY, BGCOLOR,'purple',DRAGGABLE, TEXTPADDING,2,BORDER,1,TEXTFONT,'Arial', TEXTSIZE,'12px')" onmouseout=" nd(4000);">
   Klik</a>

Prosta pseudoklasa dla odsyłacza:
}
a.myk:hover {
	 BACKGROUND:#3366cc; BORDER:#3366cc 3px solid; 
}

Budowa wewnętrzna jest zbyt duża, aby umieścić ją na stronie, więc znalazła się w prezentacji do pobrania.

-----------------------------------------------------------------------------------------------------------------------




Prezentacja czwarta
Dołączona grafika
Pobierz prezentacje - prezentacja4.rar

Tootlitp ustawia się centralnie w odstępie 10 pikseli od góry strony. Do poprawnego działania potrzebne są trzy skrypty overlibmws:
  • overlibmws.js
  • overtwo.js
  • bubble.js
  • oraz skrypt wewnętrznej budowy
  • pseudoklasa dla odsyłacza

-----------------------------------------------------------------------------------------------------------------------




Samouczek SE
Prezentacja piąta

Dołączona grafika
Pobierz prezentacje - prezentacja5.rar


Tootlitp podobnie jak przykład powyżej, ustawia się centralnie w odstępie 10 pikseli od góry strony. Do poprawnego działania potrzebny jest tylko jeden skrypt:
  • overlibmws.js
  • oraz skrypt wewnętrznej budowy
  • style css wewnętrznej budowy
Tooltip przedstawia budowe styli globalnych z ich zastosowaniem w samej prezentacji. Mianowicie:
Jak i w pierwszej edycji overlib, tak i w drugiej overlibmws, nie zabrakło polecenia do tworzenia styli globalnych.
Styl globalny na stronie jak wiadomo okazuje się bardzo pomocny i wygodny, a co za tym idzie - oszczędność kodu na stronie. Wystarczy zbudować style do potrzeby strony, a wszystkie tooltipy będą jednakowe. Pobieranie styli oczywiście zajdzie wewnątrz definicji styli w skrypcie. Tworzymy je w sekcji <HEAD, ale po co to pisze bo to oczywiste. Przykład z prezentacji zastosowania skryptu - stylu globalnego:

<script type="text/javascript">
<!--
OLpageDefaults(BGCOLOR,'rosybrown',ABOVE,NOCLOSE,STICKY,BASE,3,WIDTH,600, CGCLASS,'Eklasa', FGCOLOR,'#99ccff',CAPTIONFONTCLASS,'Cklasa',MIDX,0,RELY,10,BORDER,2,TEXTFONTCLASS,'Sklasa');
//-->
</script>
Zagnieźdżając skrypt w znacznikach <script. Za pomocą funkcji OLpageDefaults() konfigurujemy style globalne, wprowadzając jakby blok. Inne style lokalne będą zignorowane jeśli zostaną umieszczone w budowie pojedynczego tooltipa, chyba że będą to inne polecenia, które nie zostały umieszczone w skrypcie. Zapomniałem dodać że po zdjęciu kursora z napisu dymek zniknie w ustalonym odstepnie czasu, jeśli najedziemy na tootltip kursorem - nie zniknie, ale po zdjęciu kursora z tooltipa natychmiast się zamknie.

-----------------------------------------------------------------------------------------------------------------------




Prezentacja szósta
Dołączona grafika
Pobierz prezentacje - prezentacja6.rar


To dość prostej budowy tooltip, wyświetlający się poniżej tekstu, gdzie tłem jest grafika, ale w obramowaniu został zastosowany Gradient Filter w stylach css.

FILTER: progid:DXImageTransform.microsoft.Gradient(gradientType=1,StartColorStr='#ff0000',EndColorStr='#0000ff')
Więc poprawnie będzie się wyświetlał w przeglądarce IE, natomiast w przeglądarce FF obramowanie będzie wyświetlane z domyślnych kolorów ustawionych w skrypcie overlibmws. Oczywiście wyjściem jest zastosowanie polecenia, które wstawia grafike w obramowanie.

-----------------------------------------------------------------------------------------------------------------------




Samouczek SE - Wstęp do Overlibmws
Prezentacja siódma

Dołączona grafika
Pobierz prezentacje - prezentacja7.rar


Jest to tooltip opisowy, zawiera w sobie kilka mniejszych opisujących polecenia zawarte w budowie tegoż dymka. Ustawiłem tak małe dymki że ich czas trwania wynosi 7 sekund, jeśli wjedziemy kursorem na dymek to nie zniknie i będzie można nim poruszać po ekranie, a zdjęcie kursora z dymka spowoduje natychmiastowe jego zamknięcie.

-----------------------------------------------------------------------------------------------------------------------




Prezentacja ósma i ostatnia w tym temacie
Dołączona grafika

Dołączona grafika
Pobierz prezentacje - prezentacja8.rar


Jak wyżej napisałem jest to ostatnia prezentacja w tym temacie - czytaj topiku. Kolejnie będe chciał Wam przedstawić już pluginy z ich poleceniami. Troszke zajeło mi czasu stworzenie tego tooltipa, mam nadzieje ze wizualnie będzie sie jakoś podobał. Zawiera suwak oraz wewnetrzne, mniejsze tootlipy (ukryte w czernowych napisach i linkach). Chwytając belke tytułową lewym przyciskiem myszy, można okno przesuwać po ekranie. To tyle...

Możliwe problemy z poprawnym wyświetlaniem tootlipa w przeglądarkach Firefox:

- brak przeźroczystości tooltipa
- brak efektów pojawiania się i zanikania tooltipa
- oraz brak mieszania kolorów

Powodem tego jest brak filtrów graficznych, zaimpelemetowane są one jak do tej pory jedynie w przeglądarkach Internet-Explorer. Efekt przeżroczystości w przeglądrakach Firefox można uzyskać za pomocą styli css. Szeroko omówione filtry Gradient Filter w dziale Microsoftu.

http://www.e-pozycjo...pl/se/posh.html




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych