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 Mihai Mier Oct 14, 2020 8:07 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:
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 informaţii:
Crearea 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


Mihai

Mihai
Administrator
Administrator

Mesaje : 1463
Varsta : 23
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 87
Pachetul Premium Google Chrome phpBB3

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum