Inlocuirea imaginilor cu text

3 participanți

:: ForumGratuit & Web-Design :: Ajutor!Cum fac asta? [Suport] :: Cereri rezolvate!

Inlocuirea imaginilor cu textDum Sept 06, 2015 10:03 am

Cum spune si titlul as vrea sa pun un text, nu o imagine ca si aici:
Inlocuirea imaginilor cu text InAYW1p

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.

Re: Inlocuirea imaginilor cu textDum Sept 06, 2015 8:21 pm

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;
}

Re: Inlocuirea imaginilor cu textLun Sept 07, 2015 9:27 am

Merge dar uite cum se vede:
Inlocuirea imaginilor cu text GpeW2Om

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

Re: Inlocuirea imaginilor cu textLun Sept 07, 2015 10:34 am

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;
}

Re: Inlocuirea imaginilor cu textLun Sept 07, 2015 11:05 am

Nu s-a schimbat nimic.

Re: Inlocuirea imaginilor cu textLun Sept 07, 2015 1:58 pm

Postati aici link cu forumul dumneavoastra si un cont oarecare

Re: Inlocuirea imaginilor cu textMar Sept 08, 2015 9:59 am

Vii le-am lasat pe toate in pm.

Re: Inlocuirea imaginilor cu textMar Sept 08, 2015 9:21 pm

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;
}

Re: Inlocuirea imaginilor cu textMier Sept 09, 2015 10:49 am

Bun acel cod merge.
Dar as putea lasa unpic de spatiu intre butoane?
Inlocuirea imaginilor cu text LwT6TgO

Si cum as putea sa fac Subiect inchis rosu?

Re: Inlocuirea imaginilor cu textMier Sept 09, 2015 12:01 pm

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;
}

Re: Inlocuirea imaginilor cu textSam Sept 12, 2015 11:02 am

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

Re: Inlocuirea imaginilor cu textSam Sept 12, 2015 12:06 pm

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;
}

Re: Inlocuirea imaginilor cu textSam Sept 12, 2015 1:23 pm

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.
Inlocuirea imaginilor cu text 276182321

Re: Inlocuirea imaginilor cu textSam Sept 12, 2015 2:22 pm

Pot sa inchid acest subiect?

Re: Inlocuirea imaginilor cu text

Subiecte similare

text 3d CSS
Imagine + text in linie
Cum adaug un text mai jos de nume
text cu reflexie
SUBLINIERE TEXT

Mergi direct la:

Permisiunile acestui forum:

Nu puteti raspunde la subiectele acestui forum

Conectați-vă pentru a răspunde

Inlocuirea imaginilor cu text

descriptionInlocuirea imaginilor cu textDum Sept 06, 2015 10:03 am

descriptionRe: Inlocuirea imaginilor cu textDum Sept 06, 2015 8:21 pm

descriptionRe: Inlocuirea imaginilor cu textLun Sept 07, 2015 9:27 am

descriptionRe: Inlocuirea imaginilor cu textLun Sept 07, 2015 10:34 am

descriptionRe: Inlocuirea imaginilor cu textLun Sept 07, 2015 11:05 am

descriptionRe: Inlocuirea imaginilor cu textLun Sept 07, 2015 1:58 pm

descriptionRe: Inlocuirea imaginilor cu textMar Sept 08, 2015 9:59 am

descriptionRe: Inlocuirea imaginilor cu textMar Sept 08, 2015 9:21 pm

descriptionRe: Inlocuirea imaginilor cu textMier Sept 09, 2015 10:49 am

descriptionRe: Inlocuirea imaginilor cu textMier Sept 09, 2015 12:01 pm

descriptionRe: Inlocuirea imaginilor cu textSam Sept 12, 2015 11:02 am

descriptionRe: Inlocuirea imaginilor cu textSam Sept 12, 2015 12:06 pm

descriptionRe: Inlocuirea imaginilor cu textSam Sept 12, 2015 1:23 pm

descriptionRe: Inlocuirea imaginilor cu textSam Sept 12, 2015 2:22 pm

descriptionRe: Inlocuirea imaginilor cu text