fraNNNta-Design
Bine a-ti venit pe fraNNNta-Design

Nu sunteti conectat. Conectati-va sau inregistrati-va

Inlocuirea imaginilor cu text

Vezi subiectul anterior Vezi subiectul urmator In jos  Mesaj [Pagina 1 din 1]

1normal Inlocuirea imaginilor cu text la data de Dum Sept 06, 2015 10:03 am

First Time

avatar
Rank: Membru
Rank: Membru
Cum spune si titlul as vrea sa pun un text, nu o imagine ca si aici:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Dupa cum vedeti la citeaza,editeaza,sterge,ip, subiect nou, raspunde si subiect inchis are ce imi doresc si eu.





P.S: Pentru versiunea phpbb2.

Vezi profilul utilizatorului

2normal Re: Inlocuirea imaginilor cu text la data de Dum Sept 06, 2015 8:21 pm

mr.franta

avatar
Rank: Administrator
Folosind acest cod de inlocuire a imaginilor.
Cod:

document.addEventListener("DOMContentLoaded", function() {

$("img[src='link imagine']").replaceWith('<span class="buton">nume buton</span>');



});

La link imagine pui link de la imaginea pe care o vrei inlocuita.
La nume buton inlocuiesti cu ce text vrei sa apara

Apoi in css adaugi acest cod
Cod:

span.buton{
color: black;
background: #111;
padding: 4px 6px;
border-radius: 3px;
}

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

3normal Re: Inlocuirea imaginilor cu text la data de Lun Sept 07, 2015 9:27 am

First Time

avatar
Rank: Membru
Rank: Membru
Merge dar uite cum se vede:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Si inca ceva cum pot adauga un efect hover la butoane?



P.S: As vrea si la Previzualizeaza, trimite, conectare si Inregistreaza-te.



Ultima editare efectuata de catre First Time in Mar Sept 08, 2015 10:45 am, editata de 1 ori

Vezi profilul utilizatorului

4normal Re: Inlocuirea imaginilor cu text la data de Lun Sept 07, 2015 10:34 am

mr.franta

avatar
Rank: Administrator
Mai intai rezolvam butoanele acestea apoi pe celelalte.
Mai adaugati ceva in plus in acel cod css de buton:
Cod:

display: inline-block!important;
float: left;
text-align: center;
min-width: 110px;
margin: 1px!important;
}

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

5normal Re: Inlocuirea imaginilor cu text la data de Lun Sept 07, 2015 11:05 am

First Time

avatar
Rank: Membru
Rank: Membru
Nu s-a schimbat nimic.

Vezi profilul utilizatorului

6normal Re: Inlocuirea imaginilor cu text la data de Lun Sept 07, 2015 1:58 pm

mr.franta

avatar
Rank: Administrator
Postati aici link cu forumul dumneavoastra si un cont oarecare

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

7normal Re: Inlocuirea imaginilor cu text la data de Mar Sept 08, 2015 9:59 am

First Time

avatar
Rank: Membru
Rank: Membru
Vii le-am lasat pe toate in pm.

Vezi profilul utilizatorului

8normal Re: Inlocuirea imaginilor cu text la data de Mar Sept 08, 2015 9:21 pm

mr.franta

avatar
Rank: Administrator
Incercati acest cod.
Cod:

span.buton {
    background: #0c6c99;
    border-radius: 4px;
    color: #fff;
display: inline-block!important;
font-size: 12px!important;
text-shadow: 0px -1px 1px #333;
width: 100px;
text-align: center;
padding: 4px 0px;
}

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

9normal Re: Inlocuirea imaginilor cu text la data de Mier Sept 09, 2015 10:49 am

First Time

avatar
Rank: Membru
Rank: Membru
Bun acel cod merge.
Dar as putea lasa unpic de spatiu intre butoane?
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]
Si cum as putea sa fac Subiect inchis rosu?

Vezi profilul utilizatorului

10normal Re: Inlocuirea imaginilor cu text la data de Mier Sept 09, 2015 12:01 pm

just.m1ky

avatar
Moderator Global
Deci pentru spatiu intre ele adaugati la codul care vi l-a dat franta
Cod:


span.buton {
    background: #0c6c99;
    border-radius: 4px;
    color: #fff;
display: inline-block!important;
font-size: 12px!important;
text-shadow: 0px -1px 1px #333;
width: 100px;
text-align: center;
padding: 4px 0px;
}

dupa padding: 4px 0px;
margin-left: 2px;
margin-right: 2px;

Iar pentru alta culoare folositi acelasi script js numai ca ii schimbati clasa
Cod:

document.addEventListener("DOMContentLoaded", function() {

$("img[src='link imagine']").replaceWith('<span class="buton_blocat">nume buton</span>');



});

Acum in css aveti clasa span.buton_blocat (pentru blocat) cu aceleasi setari,trebuie sa schimbati doar culoarea de fundal.

Cod:

span.buton_blocat{
    background: #culoare;
    border-radius: 4px;
    color: #fff;
display: inline-block!important;
font-size: 12px!important;
text-shadow: 0px -1px 1px #333;
width: 100px;
text-align: center;
padding: 4px 0px;
}

Vezi profilul utilizatorului

11normal Re: Inlocuirea imaginilor cu text la data de Sam Sept 12, 2015 11:02 am

First Time

avatar
Rank: Membru
Rank: Membru
Merge, dar mai sunt Citeaza,Editeaza, Sterge, IP, Trimite, Previzualizeaza.
Si as vrea un efect hover la toate.

Vezi profilul utilizatorului

12normal Re: Inlocuirea imaginilor cu text la data de Sam Sept 12, 2015 12:06 pm

mr.franta

avatar
Rank: Administrator
Aplici acelasi cod javascript si pot inlocuii mai multe imagini cu un singur cod asa:

Cod:

document.addEventListener("DOMContentLoaded", function() {

$("img[src='link imagine']").replaceWith('<span class="butoane">nume buton</span>');
$("img[src='link imagine']").replaceWith('<span class="butoane">nume buton</span>');
$("img[src='link imagine']").replaceWith('<span class="butoane">nume buton</span>');
$("img[src='link imagine']").replaceWith('<span class="butoane">nume buton</span>');
$("img[src='link imagine']").replaceWith('<span class="butoane">nume buton</span>');



});


Apoi in css

Cod:

.butoane{
    background: #culoare;
    border-radius: 3px;
display: inline-block!important;
font-size: 12px!important;
text-shadow: 0px -1px 1px #333;
width: 65px;
text-align: center;
padding: 4px 0px;
float: right;
}

si cu hover{

Cod:


.butoane:hover{
background: #culoare;
}

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

13normal Re: Inlocuirea imaginilor cu text la data de Sam Sept 12, 2015 1:23 pm

First Time

avatar
Rank: Membru
Rank: Membru
Merge bine, dar nu imi apare efectul si la celelalte butoane(ma refer la Subiect nou, Comenteaza si Subiect inchis).




P.S: Am rezolvat singur aceasta problema.

Vezi profilul utilizatorului

14normal Re: Inlocuirea imaginilor cu text la data de Sam Sept 12, 2015 2:22 pm

mr.franta

avatar
Rank: Administrator
Pot sa inchid acest subiect?

Vezi profilul utilizatorului http://frannnta-design.hitforum.ro

Continut sponsorizat

Vezi subiectul anterior Vezi subiectul urmator Sus  Mesaj [Pagina 1 din 1]

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum