Crearea unei casute de informatii pentru link-uri/bannere

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Crearea unei casute de informatii pentru link-uri/bannere

Mesaj Scris de darkspectre la data de Dum 19 Iul - 17:25

Crearea unei căsuțe de informații pentru link-uri/bannere

Începeți prin a copia următorul cod în foaia de stil css
Panou de administrare => Afișare => Imagini și Culori => Culori =>  Foaie de stil css

Cod:
a.info {
position:relative;
background:none; z-index:10; }
a.info:hover { z-index:20; }
a.info span { display:none; }

a.info:hover span {
display:block;
position:absolute;
top:18px;
left:10px;
padding-left:25px;
padding-top:24px;
padding-bottom:5px;
padding-right:8px;
width:210px;
height:47px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-style:italic;
font-size:10px;
color:#000000;
text-decoration:none;
text-align:justify; }

a.info:hover>span { background-image:url(http://i86.servimg.com/u/f86/11/96/49/61/info010.png); }
a.info:hover span { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://i86.servimg.com/u/f86/11/96/49/61/info010.png", sizingMethod="crop"); }

Pentru a afișa căsuța de informații pe forum(pentru un link):
Cod:
<a href="LINK" class="info">MASCĂ LINK
<span>DESCRIEREA DIN CĂSUȚA CU INFORMAȚII</span></a>

Pentru a afișa căsuța de informații pe forum(pentru un banner):
Cod:
<a href="LINK" class="info" >
<img src="IMAGINE" /><span>DESCRIEREA DIN CĂSUȚA CU INFORMAȚII</span></a>

Pentru a personaliza textul din interiorul căsuței de informații modificați la a.info:hover span următoarele:
font-family = fontul textului
font-style = stilul fontului (variante posibile:normal , italic , oblique , inherit)
font-size = mărimea textului
color = culoarea textului
text-decoration = decorația textului (variante posibile:none , underline , overline , line-through , blink , inherit)
text-align = alinierea textului (variante posibile: left , center , right)

Dacă doriți să vă faceți singuri o căsuță mai mare, trebuie să modificați la a.info:hover span următoarele:
width = lățimea (în pixeli) destinată spațiului pentru text din imagine
height = înălțimea (în pixeli) destinată spațiului pentru text din imagine
În cod se află un exemplu de astfel de imagine. Alte imagini pentru acest cod:

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info110.png

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info210.png

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info310.png

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info410.png

Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info510.png

Alte informații:
La aceste dimensiuni (210x47 pixeli) în căsuță nu încap decât 2 rânduri de text (dimensiunile din cod nu sunt dimeniunile imaginii, ci a spațiului din imagine destinat textului). Dacă vreți să înlocuiti căsuța de informații cu una mai mare, trebuie să modificați aceste dimensiuni în cod.
Nu puteți afișa aceste căsuțe dacă nu aveți activate codurile html:
Panoul de administrare => General => Forum => Mesaje și Emailuri => Mesaje => Permite HTML => Da.
Profil => Preferințe => Autorizează întotdeauna HTML => Da.
Dacă tot nu funcționează codul: Editare (sau când deschideți) mesajul respectiv => Opțiuni => Dezactivează codul HTML în acest mesaj => Deselectați.
Codul nu funcționează pentru utilizatorii browser-ului Opera.
Rezultat:


Echipa Forumgratuit ~ darkspectre


Ultima editare efectuata de catre darkspectre in Lun 20 Iul - 14:32, editata de 3 ori

darkspectre
Membru activ

masculin

Mesaje : 2549
Varsta : 106
Localizare : auf mein land
Data de inscriere : 29/04/2008
Multumiri : 2
Niciun avertisment

http://www.fg-coding.net

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum