AcasaFAQCautareMembriGrupuriInregistrareConectare

avatar

Autor: Emanuel. | Subiect : Tooltip jQuery & CSS  ,  Vin Dec 23, 2011 9:53 pm

Descriere:
Există o mulţime de tutoriale referitoare la tooltip plugin-uri ,dar din pacate multe dintre ele ori nu sunt bine explicate ori sunt in ingleza si nu pot fi intelese de toata lumea,de aceia eu m-am deci sa fac acest tutoria si sa va explic mai amanuntit despre ce este vorba.


Demonstratie: Click


CSS:
Pentru inceput trebuie sa adaugam codul urmator in CSS.
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS >Valideaza


Cod:

.tip {
color: #fff;
background:#1d1d1d;
display:none;
padding:10px;
position:absolute;z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

.container {
width: 960px;
margin: 0 auto;
overflow: hidden;}



jQuery :
Codul jQuery il puteti adauga ori unde doriti dumneavoastra pe forum , eu am sa va dau un mic exemplu.
Panou de administrare > Afisare > Template-uri > General > overall_header >si adaugati codul dupa
Cod:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Codul jQuery :

Cod:


<script type="text/javascript" src="http://emanueltutorials.webs.com/Tooltip%20jQuery.js"></script>
<script type="text/javascript" src="http://emanueltutorials.webs.com/Tooltip.js"></script>

<div class="container">

<a href=" LINK " target="_blank"class="tip_trigger">

<img src=" IMAGINEA NR:1 " >

<span class="tip">

<img src=" IMAGINEA NR:2 ">

</span></a>



Imformati:
Unde vedetii
LINK-treceti adresa dorita de dumneavoastra.
IMAGINEA NR:1-Adaugati prima imagine
IMAGINEA NR:2-Adaugati ce-a dea 2 imagine






Tutorial realizat de: Emanuel




Comentariu
Forumgratuit.ro | © phpBB | Forum gratuit de suport | Contact | Semnaleaza un abuz | Poti avea un blog