Máscara para todos telefones de São Paulo, tanto fixo como celular.

junho 4, 2013 em Html, Java, JavaScript, JQuery

Todos os telefones que necessita ser do tipo celular, que pode ter o “9″ na frente do número, você deixa com a classe “tel”, como por exemplo:

<input type=”text” value=”” class=”tel” />

Na parte do JavaScript, você deve ter o Jquery e o jquery.mask.js.

Abaixo segue o código :

$(function(){

      $('.tel').mask('(99) 9999-9999');
      $('.telCel').mask('(99) 99999-9999');

       $.fn.setCursorPosition = function(pos) {
        this.each(function(index, elem) {
          if (elem.setSelectionRange) {
            elem.setSelectionRange(pos, pos);
          } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
          }
        });
        return this;
      };

       $(".tel").keyup(function(){
           var cel = $(this).val().substring(1, 3);
           var cel2 = $(this).val().substring(5, 6);
           var cel3 = $(this).val().substring(9, 10);
           if(cel == 11 && cel2 != '_' && cel2 == '9'  && cel3 == '-'){
               $(this).removeClass('tel');
               $(this).addClass('telCel');
               $(this).unmask();
               $(this).mask("(11) 99999-9999", [], "(11) _____-____");
               $(this).val("(11) _____-____");
               $(this).setCursorPosition(5);

           }else if(cel == 11 && cel2 != '_' && cel2 != '9'  && cel3 == '_'){
               $(this).removeClass('telCel');
               $(this).addClass('tel');
               $(this).unmask();
               $(this).mask("(99) 9999-9999", [], "(__) _____-____");
               $(this).val("(__) ____-____");
               $(this).setCursorPosition(1);
           }
       });
});

Removendo e adicionando Class com Jquery

maio 24, 2013 em Css, Html, JQuery

Removendo e adicionando Class com Jquery

 

Adicionando uma class nas Tags P

$(‘p’).addClass(‘oneClass’)

 

Removendo uma class nas Tags P

$(‘p’).removeClass(‘myClass yourClass’)

 

Exemplo de exclusão de 2 class e inclusão de 1 class em um único comando:

$(‘p’).removeClass(‘myClass noClass’).addClass(‘yourClass’);

 

Este exemplo remove o nome da classe do penúltimo <li> do último <li> .

$(‘li:last’).removeClass(function(){

return $(this).prev().attr(‘class’);

});

Funcionalidade Attr e removeAttr para manipulação html via Jquery

maio 24, 2013 em Html, JQuery

Funcionalidade Attr e removeAttr para manipulação html via Jquery
Abaixo segue exemplos da Attr e removeattr:
jQuery.Attr
Descrevendo um título para a imagem
$("img").attr('title','titulo teste');
Adicionando no attr com (N) Atributos
$("img").attr({
src: 'folder/imagem.jpg',
title:'titulo teste',
border: '1'
});
Coletando o título da da imagem
var title = $("img").attr('title');


jQuery.removeAttr
Removendo o atributo "titulo" da imagem
$("img").removeattr('title');


Referência: http://www.johnmarques.com.br/jquery/jquery-attr-e-removeattr-manipulando-as-dos-elementos-html/

Como corrigir o Erro a:hover ou li:hover em CSS

novembro 21, 2012 em Css, Html

Para correção do erro no a:hover ou li:hover que funciona normal no Firefox e no IE não funciona, basta adicionar no início do documento o seguinte dado:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr” lang=”en-US”>

 

Resetar o Select Html com Jquery

março 30, 2012 em Html, JavaScript, JQuery

/* função pronta para ser reaproveitada, caso queria adicionar mais combos dependentes */
        function resetaCombo( el )
        {
                $("select[name='"+el+"']").empty();//retira os elementos antigos
                var option = document.createElement('option');
                $( option ).attr( {value : '0'} );
                $( option ).append( 'Escolha' );
                $("select[name='"+el+"']").append( option );
        }

contar e limitar caracteres no textarea em jquery

outubro 24, 2011 em Html, JavaScript, JQuery

Segue um exemplo de como implementar o limitador de caracteres em Jquery

Antes é necessário adicionar o Jquery e o plugin Jquery Plugin Limit

 

Exemplo COM contador:

<textarea id="txt_observacao">Este é um teste</textarea>
Restam <
span id="contador_char"></span> caracteres a serem digitados.


<script type="text/javascript">
$(function(){
$('#txt_observacao').limit('255','#contador_char');
})

</script>

 

Exemplo SEM contador:

<textarea id="txt_observacao">Este é um teste</textarea>

<script type="text/javascript">
$(function(){
$('#txt_observacao').limit('255');
})

</script>

 

 

Site de Referência: http://www.cssnolanche.com.br/contar-e-limitar-caracteres-em-textarea/ 

Tabela de conversão de caracteres especiais

outubro 23, 2011 em Html

Caracteres Acentuados no Português

á &aacute; Á &Aacute; ã &atilde; Ã &Atilde;
â &acirc; Â &Acirc; à &agrave; À &Agrave;
é &eacute; É &Eacute; ê &ecirc; Ê &Ecirc;
í &iacute; Í &Iacute; ó &oacute; Ó &Oacute;
õ &otilde; Õ &Otilde; ô &ocirc; Ô &Ocirc;
ú &uacute; Ú &Uacute; ü &uuml; Ü &Uuml;
ç &ccedil; Ç &Ccedil;

 

Caracteres Especiais

espaço &nbsp;
& e comercial &amp;
> maior que &gt;
< menor que &lt;
ˆ acento circunflexo &circ;
˜ acento til &tilde;
¨ acento trema &uml;
´ acento agudo &cute;
¸ cedilha &cedil;
aspas duplas &quot;
e aspas duplas (esquerda e direita) &ldquo; e &rdquo;
e aspas simples (esquerda e direita) &lsquo; e &rsquo;
e aspas angulares simples (esquerda e direita) &lsaquo; e &rsaquo;
« e » aspas angulares duplas (esquerda e direita) &laquo; e &raquo;
º ordenal masculino &ordm;
ª ordinal feminino &ordf;
travessão ‘en’ &ndash;
travessão ‘em’ &mdash;
­ hífen oculto &shy;
¯ macron &macr;
reticências &hellip;
¦ barra vertical &brvbar;
marcador (bullet) &bull;
parágrafo &para;
§ parágrafo legal &sect;

 

Caracteres Comerciais

© copyright &copy;
® marca registrada &reg
trade mark &trade;
£ libra esterlina &pound;
¢ centavo &cent;
euro &euro;
¥ iene (yen) &yen;
¤ símbolo monetário &curren;
Cruzeiro (Brasil) &#8354;
Franco (França) &#8355;
Lira (Itália) &#8356;
Mill (US$.001) &#8357;
Naira (Nigéria) &#8358;
Peseta (Espanha) &#8359;
Rupee (India) &#8360;
Won (Coréia) &#8361;
New sheqel (Israel) &#8362;
Dong (Vietnam) &#8363;
Kip (Laos) &#8365;
Tugrik (Mongólia) &#8366;
Drachma (Greece) &#8367;

 

Caracteres Matemáticos e Lógicos

¹ elevado a um &sup1;
² ao quadrado &sup2;
³ ao cubo &sup3;
½ fração um meio &frac12;
¼ fração um quarto &frac14;
¾ fração três quartos &frac34;
fração um oitavo &#8539;
fração três oitavos &#8540;
fração cinco oitavos &#8541;
fração sete oitavos &#8542;
> maior que &gt;
< menor que &lt;
± mais ou menos &plusmn;
sinal de subtração &minus;
× sinal de multiplicação &times;
÷ sinal de divisão &divide;
asterisco &lowast;
barra de fração &frasl;
por-mil &permil;
sinal de integral &int;
somatório &sum;
PI &prod;
raiz quadrada &radic;
infinito &infin;
quase igual &asymp;
aproximadamente igual &cong;
proporcional &prop;
idêntico &equiv;
diferente &ne;
menor ou igual &le;
maior ou igual &ge;
consequentemente &there4;
ponto &sdot;
· ponto do meio &middot;
diferença parcial &part;
parte imaginária do número &image;
parte real do número &real;
minuto &prime;
segundo &Prime;
° grau &deg;
ângulo &ang;
perpendicular &perp;
nabla &nabla;
soma direta &oplus;
produto de vetor &otimes;
alef &alefsym;
ø produto vazio &oslash;
Ø produto vazio &Oslash;
elemento de/pertence a &isin;
nã é elemento de &notin;
interseção &cap;
união &cup;
subconjunto de &sub;
superconjunto de &sup;
subconjunto de ou igual a &sube;
superconjunto de ou igual a &supe;
existe &exist;
qualquer &forall;
vazio &empty;
¬ não lógico &not;
e lógico &and;
ou lógico &or;
retorno de carro &crarr;
e setas simples &larr; e &rarr;
e setas simples &uarr; e &darr;
seta simples &harr;
e setas duplas &lArr; e &hrrr;
e setas duplas &uArr; e &dArr;
seta dupla &hArr;
e teto (esquerdo e direito) &lceil; e &rceil;
e piso (esquerdo e direito) &lfloor; e &rfloor;
losango &loz;

 

Outros Acentos e Caracteres Especiais

ñ &ntilde; Ñ &Ntilde; ¡ &iexcl; ¿ &iquest;
ä &auml; Ä &Auml; å &aring; Å &Aring;
ë &euml; Ë &Euml; è &grave; È &Egrave;
ï &iuml; Ï &Iuml; ì &igrave; Ì &Igrave;
î &icirc; Î &Icirc;
ö &ouml; Ö &Ouml; ò &ograve; Ò &Ograve;
ù &ugrave; Ù &Ugrave; û &ucirc; Û &Ucirc;
ý &yacute; Ý &Yacute; ÿ &yuml; Ÿ &Yuml;
æ &aelig; Æ &AElig; œ &oelig; Œ &OElig;
&dagger; &Dagger; š &scaron; Š &Scaron;
þ &thorn; Þ &THORN; ð &eth; Ð &ETH;
§ &sect; ƒ &fnof; ß &szlig; µ &micro;

 

Caracteres Gregos

α &alpha; Α &Alpha; β &beta; Β &Beta;
γ &gamma; Γ &Gamma; δ &delta; Δ &Delta;
ε &epsilon; Ε &Epsilon; ζ &zeta; Ζ &Zeta;
η &eta; Η &Eta; θ &theta; Θ &Theta;
ι &iota; Ι &Iota; κ &kappa; Κ &Kappa;
λ &lambda; Λ &Lambda; μ &mu; Μ &Mu;
ν &nu; Ν &Nu; ξ &xi; Ξ &Xi;
ο &omicron; Ο &Omicron; π &pi; Π &Pi;
ρ &rho; Ρ &Rho; σ &sigma; Σ &Sigma;
ς &sigmaf; τ &tau; Τ &Tau; υ &upsilon;
Υ &Upsilon; φ &phi; Φ &Phi; χ &chi;
Χ &Chi; ψ &psi; Ψ &Psi; ω &omega;
Ω &Omega; ϑ &thetasym; ϒ &upsih; ϖ &piv;

 

Planetas e Signos do Zodíaco

Mercúrio &#9791;
Vênus &#9792;
Terra &#9793;
Marte &#9794;
Júpiter &#9795;
Saturno &#9796;
Urano &#9797;
Netuno &#9798;
Plutão &#9799;
Áries &#9800;
Touro &#9801;
Gêmeos &#9802;
Câncer &#9803;
Leão &#9804;
Virgem &#9805;
Libra &#9806;
Escorpião &#9807;
Sagitário &#9808;
Capricórnio &#9809;
Peixe &#9810;
Aquário &#9811;

 

Naipes do Baralho

espadas &spades;
espadas &#9828;
paus &clubs;
paus &#9831;
copas &hearts;
copas &#9825;
ouros &diams;
ouros &#9826;

 

Sinalização

Venenoso &#9760;
Cuidado &#9761;
Radioativo &#9762;
Venenoso &#9763;
Caduceu &#9764;

 

Peças de Xadrez

Rei branco &#99812;
Rainha branca &#99813;
Torre branca &#99814;
Bispo branco &#99815;
Cavalo branco &#99816;
Peão branco &#99817;
Rei preto &#99818;
Rainha preta &#99819;
Torre preta &#99820;
Bispo preto &#99821;
Cavalo preto &#99822;
Peão preto &#99823;


Conteúde pertencente à :
http://erikasarti.net/html/acentuacao-caracteres-especiais/

Imagem em base64 com php, css e html

setembro 28, 2011 em Css, Html, Php

No site: “http://www.motobit.com/util/base64-decoder-encoder.asp” você pode codificar a imagem em base64, e aplicando ao código citado abaixo, você verá que pode ser gerada a imagem a partir do código.

Alguns tipos de conversões se encontram no site: http://php.net/manual/en/function.base64-encode.php

 

A chamada para o funcionamento abaixo deve ser o “http://caminho/nomedoarquivo.php?img=pngFolder”

 

IMAGENS

$pngFolder = <<< EOFILE
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAABhlBMVEX//v7//v3///7//fr//fj+/v3//fb+/fT+/Pf//PX+/Pb+/PP+/PL+/PH+/PD+++/+++7++u/9+vL9+vH79+r79+n79uj89tj89Nf889D88sj78sz78sr58N3u7u7u7ev777j67bL67Kv46sHt6uP26cns6d356aP56aD56Jv45pT45pP45ZD45I324av344r344T14J734oT34YD13pD24Hv03af13pP233X025303JL23nX23nHz2pX23Gvn2a7122fz2I3122T12mLz14Xv1JPy1YD12Vz02Fvy1H7v04T011Py03j011b01k7v0n/x0nHz1Ejv0Hnuz3Xx0Gvz00buzofz00Pxz2juz3Hy0TrmznzmzoHy0Djqy2vtymnxzS3xzi/kyG3jyG7wyyXkwJjpwHLiw2Liw2HhwmDdvlXevVPduVThsX7btDrbsj/gq3DbsDzbrT7brDvaqzjapjrbpTraojnboTrbmzrbmjrbl0Tbljrakz3ajzzZjTfZijLZiTJdVmhqAAAAgnRSTlP///////////////////////////////////////8A////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9XzUpQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAACqSURBVBiVY5BDAwxECGRlpgNBtpoKCMjLM8jnsYKASFJycnJ0tD1QRT6HromhHj8YMOcABYqEzc3d4uO9vIKCIkULgQIlYq5haao8YMBUDBQoZWIBAnFtAwsHD4kyoEA5l5SCkqa+qZ27X7hkBVCgUkhRXcvI2sk3MCpRugooUCOooWNs4+wdGpuQIlMDFKiWNbO0dXTx9AwICVGuBQqkFtQ1wEB9LhGeAwDSdzMEmZfC0wAAAABJRU5ErkJggg==
EOFILE;
$pngFolderGo = <<< EOFILE
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJISURBVDjLpZPLS5RhFIef93NmnMIRSynvgRF5KWhRlmWbbotwU9sWLupfCBeBEYhQm2iVq1oF0TKIILIkMgosxBaBkpFDmpo549y+772dFl5bBIG/5eGch9+5KRFhOwrYpmIAk8+OjScr29uV2soTotzXtLOZLiD6q0oBUDjY89nGAJQErU3dD+NKKZDVYpTChr9a5sdvpWUtClCWqBRxZiE/9+o68CQGgJUQr8ujn/dxugyCSpRKkaw/S33n7QQigAfxgKCCitqpp939mwCjAvEapxOIF3xpBlOYJ78wQjxZB2LAa0QsYEm19iUQv29jBihJeltCF0F0AZNbIdXaS7K6ba3hdQey6iBWBS6IbQJMQGzHHqrarm0kCh6vf2AzLxGX5eboc5ZLBe52dZBsvAGRsAUgIi7EFycQl0VcDrEZvFlGXBZshtCGNNa0cXVkjEdXIjBb1kiEiLd4s4jYLOKy9L1+DGLQ3qKtpW7XAdpqj5MLC/Q8uMi98oYtAC2icIj9jdgMYjNYrznf0YsTj/MOjzCbTXO48RR5XaJ35k2yMBCoGIBov2yLSztNPpHCpwKROKHVOPF8X5rCeIv1BuMMK1GOI02nyZsiH769DVcBYXRneuhSJ8I5FCmAsNomrbPsrWzGeocTz1x2ht0VtXxKj/Jl+v1y0dCg/vVMl4daXKg12mtCq9lf0xGcaLnA2Mw7hidfTGhL5+ygROp/v/HQQLB4tPlMzcjk8EftOTk7KHr1hP4T0NKvFp0vqyl5F18YFLse/wPLHlqRZqo3CAAAAABJRU5ErkJggg==
EOFILE;
$gifLogo = <<< EOFILE
iVBORw0KGgoAAAANSUhEUgAAAGAAAABTCAYAAABgdgI7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz
NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEu
MC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVz
b3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1N
Ok9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ODg0QkM3NUZBMDhFMDExODkyQ0U2NkE5ODVB
M0Q2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMEQ2RDU5MDA5M0UxMUUwOUUwRkYwRTg2
NjQyMzQzQyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMEQ2RDU4RjA5M0UxMUUwOUUwRkYw
RTg2NjQyMzQzQyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3Mi
PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ODg0QkM3NUZB
MDhFMDExODkyQ0U2NkE5ODVBM0Q2OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1ODg0QkM3
NUZBMDhFMDExODkyQ0U2NkE5ODVBM0Q2OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRG
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
EOFILE;


$pngPlugin = <<< EOFILE
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABmklEQVR42mL4//8/AyUYIIDAxK5du1BwXEb3/9D4FjBOzZ/wH10ehkF6AQIIw4B1G7b+D09o/h+X3gXG4YmteA0ACCCsLghPbPkfm9b5PzK5439Sdg9eAwACCEyANMBwaFwTGIMMAOEQIBuGA6Mb/qMbABBAEAOQnIyMo1M74Tgiqf2/b3gVhgEAAQQmQuKa/8ekdYMxyLCgmEYMHJXc9t87FNMAgACCGgBxIkgzyDaQU5FxQGQN2AUBUXX/vULKwdgjsOQ/SC9AAKEEYlB03f+oFJABdSjYP6L6P0guIqkVjt0DisEGAAQQigEgG0AhHxBVi4L9wqvBBiEHtqs/xACAAAIbEBBd/x+Eg2ObwH4FORmGfYCaQRikCUS7B5YBNReBMUgvQABBDADaAtIIwsEx9f/Dk9pQsH9kHTh8XANKMAIRIIDAhF9ELTiQQH4FaQAZCAsskPNhyRpkK7oBAAEEMSC8GsVGkEaYIlBghcU3gbGzL6YBAAEEJnzCgP6EYs/gcjCGKQI5G4Z9QiswDAAIIAZKszNAgAEAHgFgGSNMTwgAAAAASUVORK5CYII=
EOFILE;


$pngWrench = <<< EOFILE
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAABO1BMVEXu7u7n5+fk5OTi4uLg4ODd3d3X19fV1dXU1NTS0tLPz8+7z+/MzMy6zu65ze65zu7Kysq3zO62zO3IyMjHx8e1yOiyyO2yyOzFxcXExMSyxue0xuexxefDw8OtxeuwxOXCwsLBwcGuxOWsw+q/v7+qweqqwuqrwuq+vr6nv+qmv+m7u7ukvumkvemivOi5ubm4uLicuOebuOeat+e0tLSYtuabtuaatuaXteaZteaatN6Xs+aVs+WTsuaTsuWRsOSrq6uLreKoqKinp6elpaWLqNijo6OFpt2CpNyAo92BotyAo9+dnZ18oNqbm5t4nt57nth7ntp4nt15ndp3nd6ZmZmYmJhym956mtJzm96WlpaVlZVwmNyTk5Nvl9lultuSkpKNjY2Li4uKioqIiIiHh4eGhoZQgtVKfNFdha6iAAAAaXRSTlMA//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////914ivwAAAACXBIWXMAAAsSAAALEgHS3X78AAAAH3RFWHRTb2Z0d2FyZQBNYWNyb21lZGlhIEZpcmV3b3JrcyA4tWjSeAAAAKFJREFUGJVjYIABASc/PwYkIODDxBCNLODEzGiQgCwQxsTlzJCYmAgXiGKVdHFxYEuB8dkTOIS1tRUVocaIWiWI8IiIKKikaoD50kYWrpwmKSkpsRC+lBk3t2NEMgtMu4wpr5aeuHcAjC9vzadjYyjn7w7lK9kK6tqZK4d4wBQECenZW6pHesEdFC9mbK0W7otwsqenqmpMILIn4tIzgpG4ADUpGMOpkOiuAAAAAElFTkSuQmCC
EOFILE;


$favicon = <<< SAN
iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEz
NDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEu
MC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVz
b3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1N
Ok9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ODg0QkM3NUZBMDhFMDExODkyQ0U2NkE5ODVB
M0Q2OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRkI1ODNGRTA5MDMxMUUwQjAwNEEwODc0
OTk5N0ZEOCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRkI1ODNGRDA5MDMxMUUwQjAwNEEw
ODc0OTk5N0ZEOCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3Mi
PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1ODg0QkM3NUZB
MDhFMDExODkyQ0U2NkE5ODVBM0Q2OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1ODg0QkM3
NUZBMDhFMDExODkyQ0U2NkE5ODVBM0Q2OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRG
PiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiUukzAAAAHHSURBVHja5FfRccIwDLVz
/W+7QdggbJBM0HQCwg+/LRNwTJDymx9ggmYDsgEZwRuUDVI5ET1XyE5CuIa76k7ABVtPluQnRVZV
JcYST4woD85/ZRbC5wxUf/sdbZagBehGVAvlNM+GXWYaaIugQ+QDdA1OnLqByyyAzwPo042iqyMx
BwdKN7jMNODREWKFyonv2KdPPqERoDlPGQMKQ7drPWPjfAy6Inb080/QiK/2Js8JMacBpzWwzGIs
QFdxhujkFMNtSkj3m1ftjTnxEg0f0XNXAYb1mmatwFPSFM1s4NTwuUp18QU9CiyonWj2rhkHWXAK
kNeh7gdMQ5wzRdnKcAo9DwZcsRBtqL70qm7Ior3B/5zbI0IKrvv8mxarhXSsXtrY8m5OfjB+F5SN
BkhKrpi8635uaxAvkO9HpgZSB/v57f2cFpEQzz+UeZ28Yvq+bMXpkb5rSgwLc+Z5Fylwb+y68x4p
MlNW2CLnPUmnrE/d7F1dOGXJ+Qb0neQqre9ptZiAscTI38ng7YTQ8g6Budlg75pktkxPV9idctss
1mGYOKciupsxatQB8pJkmkUTpgCvHZ0jDtg+t4/60vAf3tVGBf8WYAC3Rq8Ub3mHyQAAAABJRU5E
rkJggg==
SAN;

 

 

//affichage des images
if (isset($_GET['img']))
{
switch ($_GET['img'])
{
case ‘pngFolder’ :
header(“Content-type: image/png”);
echo base64_decode($pngFolder);
exit();

case ‘pngFolderGo’ :
header(“Content-type: image/png”);
echo base64_decode($pngFolderGo);
exit();

case ‘gifLogo’ :
header(“Content-type: image/gif”);
echo base64_decode($gifLogo);
exit();

case ‘pngPlugin’ :
header(“Content-type: image/png”);
echo base64_decode($pngPlugin);
exit();

case ‘pngWrench’ :
header(“Content-type: image/png”);
echo base64_decode($pngWrench);
exit();

case ‘favicon’ :
header(“Content-type: image/x-icon”);
echo base64_decode($favicon);
exit();
}
}

 

 

EXEMPLO 2

$file = “icon.gif”;
if($fp = fopen($file,”rb”, 0))
{
$picture = fread($fp,filesize($file));
fclose($fp);
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = chunk_split(base64_encode($picture));
$tag = ‘<a href=”http://www.britblog.com/”><img ‘ . “n” .
‘src=”data:image/gif;base64,’ . $base64 .
‘” alt=”British Blog Directory” width=”80″ height=”15″ />’;
echo $tag;
}

 

Exemplo 3

Em css pode ser feito desta maneira:

.img_teste{

   content: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2P4//8/w8yZM//DMIjPAGPAMIiPWxCIMQQxzAQAoFpF7lGFr24AAAAASUVORK5CYII=”);
}