Azuga
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.


Azuga
 
AcasaPortal*CăutareUltimele imaginiÎnregistrareConectare

 

 Crearea unei casute de informatii pentru link-uri / bannere

In jos 
AutorMesaj
Vizitato
Vizitator




Crearea unei casute de informatii pentru link-uri / bannere Empty
MesajSubiect: Crearea unei casute de informatii pentru link-uri / bannere   Crearea unei casute de informatii pentru link-uri / bannere EmptyMier Aug 19, 2009 12:48 pm

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:
Crearea unei casute de informatii pentru link-uri / bannere Info110
Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info110.png
Crearea unei casute de informatii pentru link-uri / bannere Info210
Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info210.png
Crearea unei casute de informatii pentru link-uri / bannere Info310
Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info310.png
Crearea unei casute de informatii pentru link-uri / bannere Info410
Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info410.png
Crearea unei casute de informatii pentru link-uri / bannere Info510
Cod:
http://i86.servimg.com/u/f86/11/96/49/61/info510.png
Alte ingformatiiCrearea unei casute de informatii pentru link-uri / bannere Sageat10La 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.
Crearea unei casute de informatii pentru link-uri / bannere Sageat10Nu 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.

Crearea unei casute de informatii pentru link-uri / bannere Sageat11Codul nu funcţionează pentru utilizatorii browser-ului Opera.
Rezultat
Crearea unei casute de informatii pentru link-uri / bannere Info
Sus In jos
 
Crearea unei casute de informatii pentru link-uri / bannere
Sus 
Pagina 1 din 1
 Subiecte similare
-
» Bannere cosmic.all-up.com
» Saw V (Informatii)
» Tutorial cs - Pentru incepatori (Si nu in nume de rau )
» Tutorial cs - 16 pasi pentru a reduce lagul pe servar
» Link-uri utile

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
Azuga :: Off Topic :: Tutoriale-
Mergi direct la: