Bine ati venit pe forumul HelpDesign™️ !
***Innainte de postare va rugam sa cititi REGULAMENTUL forumului !
***Fiind un membru nou inscris nu puteti expedia mesaje private decat dupa postarea a cel putin 1 mesaj pe forum !

Echipa HelpDesign™️ va doreste navigare placuta pe forumul nostru !



 
AcasaAcasa  CalendarCalendar  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  Panou de administare    

Distribuiţi | 
 

 ToolTip jQuery & CSS

Vezi subiectul anterior Vezi subiectul urmator In jos 
AutorMesaj
avatar
Gughy
Administrator
Administrator

Mesaje Mesaje : 88
Varsta Varsta : 28
Localizare Localizare : HelpDesign

MesajSubiect: ToolTip jQuery & CSS   Sam Sept 10, 2011 5:06 am

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
Sursa: SOHTANAKA
Sus In jos
Vezi profilul utilizatorului http://helpdesign.forumhit.ro
avatar
RaduMan96
Membru
Membru

Mesaje Mesaje : 46

MesajSubiect: Re: ToolTip jQuery & CSS   Joi Noi 17, 2011 9:54 am

pfooai ce imi place rezultatul
Sus In jos
Vezi profilul utilizatorului
 

ToolTip jQuery & CSS

Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Tutoriale :: Alte Tutoriale-
creează un forum | Jocuri | Tir | © phpBB | Forum gratuit de suport | Contact | Semnaleaza un abuz | Poti avea un blog