Scris de darkspectre Dum Iul 19, 2009 5:25 pm
| Crearea unei casute de informatii pentru link-uri/bannere | |
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:
|
Ultima editare efectuata de catre darkspectre in Lun Iul 20, 2009 2:32 pm, editata de 3 ori
Acasa
Crearea unei casute de informatii pentru link-uri/bannere
Subiecte similare