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
avatar
darkspectre
Membru activ

Mesaje : 2549
Varsta : 108
Localizare : auf mein land
Data înscrierii : 29/04/2008
Multumiri : 2
Niciun avertisment

Vezi profilul utilizatorului 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