Boa tarde ae!
Avisando aqui que os links que setão para o conteudo do tutorial zipado ou funcionando estão quebrados e como eu to com preguiça num vo editar os posts por enquanto bom mais pra frente vou colocar mais tutoriais por enquanto to dando uma corrida com um outro projeto mais dele vai sair bastante coisa interessante aqui para o blog.
falo rapaziada
Boa tarde ae!
Bom hoje aqui colocando mais um post sobre a série que eu falei que ia fazer sobre php da iniciação até um nivel bacana.
Agora aqui vou colcoar como executar um formulario em PHP tudo na mesma página para quem leu o post anterior já teve uma breve ideia de como é programar em PHP que não é nada de muito extraordinario claro que eu aconselho a dar uma olhada no site do php que tem o link aqui do lado o php.net para poder ir dando uma olhada nas oturas funções e em tudo que o PHP proporciona
Bom eu vou colocar aqui primeiro o bloco PHP e depois o bloco HTML mais eles devem ser colocados na mesma página nesta sequencia mesmo PHP HTML vou colocar um link para baixar e outro para ver o código
Bom uma breve explicação sobre variaveis em PHP, estava esquecendo isso, as variaveis no php são designadas pelo cifrão ($) antes da palavra que pode ser com letras numeros e com underline por exemplo $leite2 ou $leite_2 são variaveis que podem ser usados para qualquer valor seja string ou numero não é necessario designar pra que a variavel vai ser usada e pode ser declarada a qualquer momento as vezes é necessarioela como vazio (“”) mas nem sempre quando for necessario eu explicarei melhor apra não ficar muita informação. Este é o básico quanto a variaveis elas podem ter letras, numeros ou underline somente underline de simbolo lembrando e não precisam ter o seu uso especifico e podem ser declaradas a qualquer momento.
Bom vamos lá
<?php //Aqui é a abertura do código PHP
$mesma_pag = $_SERVER['PHP_SELF'];//Esta variavel recebe uma variavel do servidor que seta a mesma página como a ação do formulario no caso
$estado=”<form method=’POST’ action=’”.$mesma_pag.”‘>
Nome <input type=’text’ name=’nome’ /><br /><br />
E-mail <input type=’text’ name=’email’ /><br /><br />
<input type=’submit’ name=’enviar’ value=’enviar’ />
</form>”;//Aqui eu montei o formulario em HTML como viram com dois campos e um botão o PHP aceita sem problemas as tags HTML o que é otimo para montar dinamicamente tabelas layouts coisas assim
if (isset($_POST['enviar'])){//Aqui ele executa a ação se o botão for apertado ele vai executar o formulario
$nome=$_POST['nome'];//Aqui ele pega o valor do input com o nome “nome” rs
$email=$_POST['email'];//Aqui ele pega o valor do input com o nome “email”
$estado=”Seu nome é “.$nome.”<br/><br/>E tem o e-mail “.$email.”<br /><br /><a href=’http://www.alrp.com.br/form-mesma-pag.php’>clique aqui</a> Para ver o formulario novamente.”;//Aqui ele executa essa mensagenzinha com os dados do formulario bem básico ai ele muda o valro da varial onde eu tinha colocado o formulario para esta mensagem
}
?><!–Aqui é o final do código PHP–>
Agora vamos ao código em HTML
<!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”><!–Cabeçalho padrão do HTML–>
<head>
<title>Formulario executado na mesma página com PHP – Tutoriais para web</title><!–Um titulo só para ver que eu estou progredindo em breve vou fazer coisas mais bonitinhas–>
</head>
<body>
<?php echo $estado; ?><!–Aqui ele exibe a variavel tanto o formulario como a mensagem com os dados–>
</body>
</html>
Bom é básicamente isto a execução do formulario de agora em diante vamos usar bastante formularios e começar a fazer o uso de funções que é uma programação orientada a objeto mais não é ao mesmo tempo é a forma que eu programo rs bem útil
Bom espero que todos tenham entendido qualquer duvida mande um comentario
O código funcionando clique aqui
O código zipado clique aqui
Até mais!
Boa tarde ae!
Bom escrever o primeiro post de uma série de posts que eu pretendo fazer sobre php e alguas coisas que podem ser feitas com esta linguagem que eu acho muito muito boa mesmo rs.
O PHP em si é uma linguagem simples e intuitiva até é de fácil uso e incorporação no código HTML por exemplo.
Bom o primeiro passo para começar a desenvolver em PHP é instalar o apache e o PHP que vai compilar o PHP eu uso agora o Vertrigo que pode ser baixado clicando aqui ele já tem o PHP e o apache e também um servidor MySql mais este eu não aconselho usar por alguns vicios de sintaxe que acaba acontece (já aconteceu comigo) então para o MySql eu prefiro instalar o MySql Server que também pode ser baixado clicando aqui bom depois de tudo instalado e configurado, os dois são bem fáceis de instalar.
Ai agora você entra na pasta www do vertrigo normalmente ela fica no caminho C:/Arquivos de Programas/Vertrigo/www e crie uma pasta Primeiro-teste-php.
Depois de criada a pasta abra o seu editor preferido no meu caso o notepad++ que tem um link aqui na coluna ao lado e crie um arquivo novo.
Neste novo arquivo insira as seguintes linhas
<?php //Esta é a abertura do código em PHP
echo “Esta é a minha primeira experiência com PHP”; //Aqui você usa a primeira função do php a palavra echo que imprime no navegador o que estiver entre aspas ou uma varialvel e nunca esquecendo de fechar uma linha com ponto e virgula entre a abertura e a finalização do código php
?> //Aqui é o fechamento do código PHP
Salve como primeiro-arquivo.php e salve na pasta que você acabou de criar.
Agora no seu navegador eu no caso uso o Mozilla Que já deve ser conhecido de todos para quem não conhece é bom dar uma olhada clique aqui para conhecer o firefox, com o servidor que você instalou iniciado normalmente aparece um icone ao lado do relogio mostrando que ele está iniciado, digite na barra de endereço do seu navegador http://localhost/Primeiro-teste-PHP/primeiro-arquivo.php e dê enter ou clique em ir ou que seja rs.
Imagem do icone do servidor inciado no caso aqui o easy php bom não estou em casa rs
Pronto você está vendo a sua primeira aventura com PHP na página deve aparecer algo assim.
Bom agora com este pequeno tutorial você aprendeu a imprimir no navegador os dados PHP
No próximo vou mostrar como executar um formulario em php
Até mais!
Boa noite ae!
Bom com o blog agora entrando para a sua quarta semana de vida e com 500 acessos, que eu to achando bem legal com uma média bacana por dia, gostaria de falar para vocês que visitam aqui as vezes que o blog está aberto para sugestões de posts tutoriais ou parcerias se você acha que pode escrever alguma coisa que seja util para os outros o espaço estará sempre aberto.
quero também me desculpar pelo jeito que eu escrevo uhauhauauha bom devem ter percebido que eu erro direto e omito algumas virgulas mas é assim não so aquele fã de gramática gosto de escrever os tutos por que acho que algumas pessoas as vezes podem achar interessante e aprender ou só pegar o código ou sei lá que seja rs.
Já tomei bronca da patroa por causa disso mais creio que não irá mudar quanto a isso.
Bom é isso ae quem tiver coisas bacanas ou quiser que eu escreva sobre alguma coisa especifica ou precisa de um elemento para alguma coisa só pedir estamos ae a disposição.
Bom prometo para breve uma série de posts sobre PHP o que não é o mais motiva o pessoal a visitar aqui mais eu acho bem interessante é uma lingua muito boa de qualquer forma.
Fiquem a vontade até mais!
Boa tarde ae!
Bom colocar um tutorial aqui bacana não sei direito o nome deste elemento mais acho ele bem útil e interessante vou colocar umas imagens da aba fechada e aberta é bem útil para colocar informações ou coisa do genero e deixa um efeito bem bonito no site
esta é a aba fechada
e esta é ela aberta a imagem tá bem tosquinha mais é só acessar o link que eu vou passar que vocês podem ver ela funcionando
bom é uma estrutura relativamente simples e o código também e fácil de fazer como todos os outros que eu tenho postado aqui
o código JQuery
$(document).ready(function(){//Aqui é como começa o código JQuery significa que quando o documento estiver carregado elefará as ações
$(“#aba-btn”).click(function(){//O evento que abre e fecha a aba
if (this.state!=1){//Se o estado da aba estiver diferente de 1
$(“#aba-btn”).animate({“marginTop”:”200px”},500,function(){//O botão da aba vai para baixo aqui no caso a aba tem 200 pixels de altura pode ser mais ou menos é só mudar aqui e embaixo tbm
$(“#aba-btn”).text(“Fechar aba”);//Aqui ele muda o texto para fechar caso você queira colocar uma imagem aqui mude para por exemplo “$(“#aba-btn”).hmtl(“<img src=’img-fechar.jpg’ />”);“
});
$(“#fundo-aba”).animate({“height”:”200px”},500); //A aba abaixa para 200 pixels que pode ser alterado mudando aqui no “200px”
$(“#conteudo-aba”).slideToggle(); //O conteudo aparece com um efeito de slide
this.state=1;//Iguala o estado a 1
}else{ //Se o estado for igual a 1
$(“#aba-btn”).animate({“marginTop”:”0px”},500,function(){ //O botão sobe
$(“#aba-btn”).text(“Abrir aba”);//O texto do botão muda para abrir novamente como eu coloquei no de cima caso você tenha colocado uma imagem ao inves do texto mude para por exemplo “$(“#aba-btn”).hmtl(“<img src=’img-abrir.jpg’ />”);“
});
$(“#fundo-aba”).animate({“height”:”0px”},500);//A aba fica escondida
$(“#conteudo-aba”).slideToggle();//E o conteudo também fica escondido com um efeito de slide de novo
this.state=0; //O estado é igualado a zero
}
});
});
o código css
#aba-btn{//Estilo do botão da aba
position:absolute;//Posição absoluta para ele ficar acima do conteudo do site a mesma coisa a div fundo-aba
z-index:1000;
left:0;//Mude aqui caso você queira que ele nao fique no canto da tela
font-weight:bold;
background:#f1f1f1;
padding:3px;
cursor:pointer;
}
#fundo-aba{//Aqui é o fundo da aba que vai tomar a tela inteira nada de especial no estilo como vocês podem ver
width:100%;
position:absolute;
z-index:1000;
left:0;
background:#f1f1f1;
}
#conteudo-aba{//Estilo para o conteudo da aba nada de mais também ele começa sem o display pq ele é exibido com o efeito
margin:0 auto;
width:700px;
display:none;
}
a estrutura HTML
<div id=”fundo-aba”> //Este é o fundo da aba que tem 100% de largura
<div id=”conteudo-aba”>//O conteudo que vai na aba
Aqui é uma aba de informações ou do que você precisar é bem útil e bem bonito o efeito
</div>
</div>
<div id=”aba-btn”>//Aqui é o botão da aba você pode colocar uma imagem aqui ou no conteudo da aba ai é só adaptar para o que você irá precisar
Abrir aba
</div>
para ver essa aba funcionando clique aqui
para baixar este código clique aqui
Até mais!
Boa noite ae!
Bom agora aqui colocando um elemento gráfico que é bem útil e tbm bastante usado.
É uma galeria até que básica bastante funcional e fácil de fazer ela tem um slider para os thumbs e a foto aparece em uma div acima, nessa galeria você vai precisar de ter uma imagem com o tamanho que você quer mostrar e ela em um tamanho menor caso você não queira perder qualidade e perder um pouco de performance pq redimensionar uma imagem no html não é muito aconselhavel.
Esta é a imagem da galeria
bom primeiro vamos a estrutura do html
<div id=”imagens”>//Div para pré carregar as imagens grandes
<img src=”1.jpg” />
<img src=”2.jpg” />
<img src=”3.jpg” />
</div>
<div id=”root”>
<div id=”mostra-foto”>//Div que mostra as imagens
</div>
<div id=”info”>//Div que vai receber o texto
<div id=”texto-info”>//Div para o texto receber um padding
</div>
</div>
<div id=”seta-esq”>//Div da seta esquerda que movimenta o slider
<img src=”imgsgaleria/seta-esq.gif” />
</div>
<div id=”caixa-slider”>
<div id=”fundo-slider”>
<div class=”parte-slider”> //Divs com as caixas do slider aqui temos 3 caixas mais é só repetir esta div que você terá quantas precisar
<img src=”imgsgaleria/1-mini.jpg” alt=”arte japonesa bem bonita” /> //Thumb da imagem 1 com alt que vai aparecer no box de texto
</div>
<div class=”parte-slider”>
<img src=”imgsgaleria/2-mini.jpg” alt=”minhas aventuras com modelagem” />
</div>
<div class=”parte-slider”>
<img src=”imgsgaleria/3-mini.jpg” alt=”peão de obra” />
</div>
</div>
</div>
<div id=”seta-dir”> //Div da seta direita
<img src=”imgsgaleria/seta-dir.gif” />
</div>
</div>
agora o css
html,body{//Zerar o padding o margin e colocar uma fonte
margin:0;
padding:0;
font-family:tahoma;
color:#000;
}
#root{ //Div que vai servir para suportar td o conteudo
height:auto;
width:600px;
margin:10px auto;
}
#mostra-foto{//Caixa que mostra a foto com a altura minima de 500px
width:600px;
float:left;
overflow:hidden;
text-align:center;
min-height:500px;
}
#caixa-slider{//Caixa do slider
margin:10px 0 0 0;
height:70px;
width:500px;
float:left;
overflow:hidden;
}
#seta-esq,#seta-dir{//Div das setas
height:70px;
width:50px;
float:left;
margin:10px 0 0 0;
}
#fundo-slider{//Div que recebe td o slider
width:auto;
height:70px;
}
.parte-slider{//Caixas do slider
width:auto;
height:70px;
margin:0 6px;
float:left;
}
.parte-slider img,#seta-esq img,#seta-dir img{//Para deixar o ponteiro do mouse diferente nas setas e nas caixas do slider
cursor:pointer;
}
#info{//Caixa que vai receber o texto
height:50px;
width:600px;
float:left;
margin:-50px 0 0 0;
background:#555;
}
#texto-info{//Aqui vai o texto com um padding
color:#fff;
padding:10px;
font-weight:bold;
}
#imagens{//Caixa para précarregar as imagens aqui ela não aparece
display:none;
}
e por fim o jquery
$(function(){
var src=”";//Variaveis que vão receber o caminho, tratar o caminho, o texto que vai na caixa de informação, contar as partes do slider e a que vai receber o tamanho máximo do slider respectivamente;
var src2;
var alt;
var i=0;
var max;
$(“#fundo-slider”).find(“.parte-slider”).each(function(){ //Aqui ele conta as partes do slider
i++;
});
max=(i*70)-70;//Aqui ele deixa o maximo do slider menos 1 parte do slider
$(“#info”).fadeTo(-500,0.5); //dá uma esmaecida na caixa de informação
$(“#mostra-foto”).html(“<img src=’imgsgaleria/1.jpg’ />”);//Deixa a primeira imagem carregada na caixa que mostra a foto
$(“#texto-info”).text(“arte japonesa bem bonita”);//Deixa o alt da primeira imagem carregada na caixa de informação
$(“.parte-slider img”).click(function(){ //Evento de clicar na imagem
alt = $(this).attr(“alt”); //Recebe o texto da imagem
src=$(this).attr(“src”); //recebe o caminho da imagem
src2=src.split(“-”); //Divide o caminho da imagem para tirar o mini que significa que ela é um thumb
$(“#info”).animate({“marginTop”:”0px”,”height”:”0px”},500,function(){//Aqui ele faz o movimento de esconder a caixa de informação, colocar o texto na caixa e carregar a imagem grande tudo como callback
$(“#texto-info”).text(alt);
$(“#mostra-foto”).html(“<img src=’”+src2[0]+”.jpg’ />”);
});
$(“#info”).animate({“marginTop”:”-50px”,”height”:”50px”},500); //Aqui ele faz a caixa de texto aparecer novamente
});
$(“#seta-dir img”).click(function(){ //Movimentação do slider
if ($(“#fundo-slider”).css(“marginLeft”) != “-”+max+”px”){ //Se a posição estiver diferente do máximo permitido ele movimenta
$(“#fundo-slider”).animate({“marginLeft”:”-=70px”},500);
}
});
$(“#seta-esq img”).click(function(){ //Movimentação do slider
if ($(“#fundo-slider”).css(“marginLeft”) != “0px”){//Se a posição estiver diferente do minimo permitido ele movimenta
$(“#fundo-slider”).animate({“marginLeft”:”+=70px”},500);
}
});
});
Até mais rapaziada.
Boa tarde a todos ae!
Vou colocar aqui um tutorial simples e bem fácil de se fazer sobre navegação sem refresh usando JQuery muitas vezes eu já procurei por isso e é bem interessante.
A estrutura é simples você terá uma div que receberá os dados dos links que funcionará basicamente como um famigerado iframe, mas de uma forma melhor.
Lembrando que este código pode servir para uma navegação com abas só que de uma forma diferente a dica é não deixar as páginas muito pesadas pq se não a performance vai cair bastante deixando o site lento.
Nos próximos tutoriais vou fazer um de accordion novamente e um de abas com imagens e algumas outras funcionalidades que não fiz no outro e também vou fazer um novo sobre menu com slider em breve acredito que nesta semana ainda teremos aqui versões melhoradas dos tutoriais antigos e também vou começar uma série de tutorias sobre php do básico até onde eu sei rs
Vamos ao código, aqui segue o código em JQeury.
$(document).ready(function (){
$(“#conteudo”).load(“index.html”); //Aqui ele faz com que a página carregue o arquivo index.html na div conteudo assim que ele carregar, você pode usar o nome de arquivo que quiser eu deixei este no exemplo para ficar mais intuitivo
$(“.links”).click(function(){ //Evento de clique em algum item do menu
$(“#conteudo”).fadeOut(10); //Aqui faz a div conteudo dar um efeito de fade out para
$(“#conteudo”).load($(this).attr(“href”)); //Aqui carregar o conteudo que é carregado pelo atributo href do link pode por exemplo um span com um atributo name ai você pode usar do modo que quiser.
$(“#conteudo”).fadeIn(1000); //Aqui faz um efeito de fade in na div conteudo com o conteudo já carregado
return false; //Aqui ele faz com que o link não seja carregado, assim ele só carrega o conteudo do arquivo na div aqui no caso a div conteudo
});
});
Aqui eu vou colocar um exemplo em HTML com duas páginas e um menuzinho simples você pode
<div id=”root”>//Div para servir de caixa para segurar todos os elementos
<div id=”menu”> //Div para guardar os links
<a href=”index.html” style=”background:#f0f0f0;”>Home</a> //Link home ele começa com a cor diferente
<a href=”contato.html”>Contato</a>//Link de contato mais pode ser qualquer um.
</div>//Fecha a div menu
<div id=”conteudo”> //Div que vai receber os dados
</div> //Fecha a div conteudo
</div>//Fecha a div root
E aqui eu vou colocar o css que eu usei só para não ficar muito tosco
#root{ //Uma largura na root para ficar um em cima do outro
width:300px;
}
#menu{ //Menu com float para uma div ficar em cima da outra
wdth:auto;
height:25px;
float:left;
}
.links{ //Link com background, margin e padding para dar uma aparencia de aba
margin:0 10px;
background:silver;
padding:5px;
}
#conteudo{ //Um estilo na div conteudo para dar aparência de caixa
border:1px solid #000;
padding:5px;
float:left;
width:auto;
height:100px;
}
A estrutura é simples é possivel fazer muita coisa com esse código simples
Para baixa o zipado clique aqui
Para ver o site funcionando clique aqui
Até mais
Boa quase madrugada a todos!
Hoje vou colocar aqui, um tutorial que eu já tinha prometido a uns posts atrás, a classe conexão com o banco de dados mysql e o modo de usar, que vocês podem ver as vezes aqui nos posts sobre MySql e PHP.
A conexão é simples e fácil de fazer com PHP, que a faz a ponte entre o front-end e o banco de dados MySql como vocês podem ver neste tutorial rápido.
Bom vamos ao código.
<?php
class CONEXAO{
var $usuario = "root";//Variavel que recebe o dado do usuario para a conexão
#var $senha = "123"; //Variavel que recebe a senha do usuario
var $sid = "localhost";//Variavel que recebe o nome do servidor
var $banco = "bd";//Variavel que recebe o nome do banco de dados que você vai usar para guardar os dados
var $consulta = ""; //Variavel que receberá os dados da consulta
var $link = "";//Variavel que receberá os dados do link com o banco
function CONEXAO(){ //Função instanciadora do objeto
$this->Conecta();
}
function Conecta(){ //Função de conexão
$this->link = mysql_connect($this->sid,$this->usuario,$this->senha); //Código para conexão normal
if (!$this->link){ //Caso não consiga conectar ele retorna essa mensagem que pode ser qualquer uma
die("Problema na Conexão com o Banco de Dados");
}elseif (!mysql_select_db($this->banco,$this->link)){ //Ou ele vai definir o banco que se caso não for possivel ele emite outra mensagem que pode ser qualquer uma também
die("Problema na Conexão com o Banco de Dados");
}
}
function Desconecta(){ //Função para desconectar
return mysql_close($this->link);
}
function ultimoregistro(){
return mysql_insert_id($this->link);
}
function Consulta($consulta){//Função de consulta
$this->consulta = $consulta;//Passa o valor da variavel que veio com a sua query para a variavel da classe
if ($resultado = mysql_query($this->consulta,$this->link)){ //Executa a query caso tenha sucesso retorna o valor
return $resultado;
} else { //Caso aconteça algum erro ela retorna o numero 0;
return 0;
}
}
}
?>
Aqui eu vou colocar um exemplo básico de uso da classe
<?php
include ('conecta.php');//Incluindo a classe de conexão na página
function deleta_tabela($nome){//Função básica só para mostrar um teste aqui
$Obj_Conexao = new Conexao(); //Variavel que instancia o objeto da classe de conexão
$consulta = "truncate $nome"; //Uma query no caso um truncate pode ser um insert um update um select qualquer coisa
if ($Obj_Conexao -> Consulta ($consulta)){ //Executa a query acima se tiver sucesso retorna o numero 1 ou o numero 0
$estado=1;
}else{
$estado=0;
}
return $estado; //Aqui ele retorna o sucesso ou erro da query (1 ou 0 respectivamente)
}
?>
e os comentários estão sempre abertos para você que é leitor aqui do blog dar a sua opinião.
Até mais e obrigado pela visita!
Boa madrugada ae!
Bom hj vou colocar o que eu deveria ter escrito no começo rs mais como eu gosto de emoção huauhahuha to colocando agora, hoje vou escreve aqui sobre como colocar os scripts corretamente na página que você estiver desenvolvendo
1° dica: para inserir o código de uma forma que ele não atrase o carregamento da sua página é ao invés de colocar as tags <script></script> que é usada para inserir o código no header da página você deve colocar logo após de fechar a tag <body></body> assim os script serão carregados depois da página ser carregada com todas os elementos já declarados.
2° dica: para usar o jquery você deve fazer o download do arquivo que é leve, bom para quem não sabe o/a jquery (não sei o sexo disso) é uma biblioteca de javascript existem outras mas pelo menos eu prefiro a jquery, clique aqui para fazer o download. Depois que fizer o download e colocar ele em uma pasta do seu site, eu aqui em todos os exemplos uso uma pasta js, ai é só inserir este código na sua página logo após o fechamento da tag <body></body>:
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
Após esse código é só inserir outra tag como essa:
<script type=”text/javascript”></script>
E dentro dela colocar o seu código em JQuery ou javascript puro.
3° dica: o código que é usado com jquery é simples vamo a uma estrutura simples
$(document).ready(function(){//Inicio do código, aqui eu falo que os códigos vão ser executados assim que o documento estiver carregado você pode encurtar este código escrevendo somente $(function(){ os dois tem a mesma função é só uma “abreviatura”
$(“#btn”).click(function(){ //Aqui é o evento quando o usuario clicar na div com a id btn acontecerá este evento aqui no caso pode ser usado também uma classe uma pseudo classe ou diversas coisas separadas por virgula por exemplo $(“#btn, .titulo, #topo img”).click(function(){ aqui estão as três possibilidades
alert(“você clicou no botão”); //Aqui é o acontece quando o evento é disparado no caso aqui um alert simples vai só aparecer uma caixa com esta frase mais pode ser um movimento um carregamento de página uma passagem de dados para php no metodo post podem ser muitas coisas ai com o tempo eu vou mostrando mais coisas aqui ou vocês mesmos podem ver no site da jquery no link do lado aqui
}); //Aqui fecha o evento
}); //Aqui fecha o bloco de código da JQuery
4° dica: existem diversos plugins para jquery caso você vá usar um ou vários deles você precisa colocar ele depois de importar a jquery e antes do seu bloco de código para tudo funcionar certinho o plugin que eu gosto de usar, bom eu não gosto de plugins prefiro fazer na unha mais o que eu mais uso é o jquery.timer se quiserem dar uma olhada nele clique aqui.
Bom por hora vou colocar isso não quero ser chato e escrever um texto imenso que sei que quase ninguém lê.
Dúvida pergunta qualquer coisa usem a vontade o comentário.
Em breve vou por umas ferramentas mais dignas aqui e mais alguns projetos para mostrar para quem lê aqui
Obrigado pela visita e bom domingo ae!
Boa tarde ae!
Colocando aqui um tutorial bem útil que ensina fazer tooltips é rápido e como no último vo passar o fonte para download e ele está publicado também para quem quiser ver funcionando.
Vamos ao código
$(function(){
var pos;//Variavel para a posição
var num;//Variavel para a numereção que vai comandar o conteudo do tooltip
$(“.texto”).mouseover(function(){//Evento para o tooltip aparecer
pos = $(this).offset();//Aqui a variavel de posição pega o valor para onde o tooltip vai aparecer
$(“#tooltip”).css(“left”,pos.left+”px”);//Aqui o tooltip recebe o valor lateral
$(“#tooltip”).css(“top”,pos.top+30+”px”);//Aqui o tooltip recebe o valor da posição vertical aqui ele aparece em baixo se fosse para aparecer em cim pode trocar ao inves de +30 pode ser colocado -30 ai ele ficará em cima ou de qualquer outra forma
$(“#tooltip”).fadeIn(); //Aqui é um efeito de fade para o tooltip aparecer
num = $(this).attr(“name”);//Aqui a variavel de numeração recebe qual o numero do lugar que o mouse esta
switch(num){//switch para decidir qual conteudo vai no tooltip
case ’1′:
$(“#tooltip”).text(“Clique aqui para ir para a home”);//Se for no que tiver o numero um no caso o texto home vai esse texto
break;
case ’2′:
$(“#tooltip”).text(“Clique aqui para ir para a pagina de contato”);//Caso estiver no numero 2 no caso o texto contato vai este texto
break;
}
});
$(“.texto”).mouseout(function(){//Evento para o tooltip desaparecer
$(“#tooltip”).fadeOut(800,function(){//Função de fade out com callback
$(“#tooltip”).text(“”);//Callback do fade que faz o texto sair
});
});
});
Estrutura do css
html,body{
margin:0;
padding:0;
}
#root{
margin:10px auto;
height:100px;
width:200px;
}
#caixa-texto{
margin:20px;
height:30px;
width:160px;
}
.texto{
width:80px;
heihgt:30px;
float:left;
}
#tooltip{
display:none;
width:auto;
height:auto;
padding:5px;
background:silver;
position:absolute;
}
Nada de mais aqui só a id tooltip que tem que estar com a position absolute e o display none sempre
A estrutura html deste tutorial
<div id=”root”>
<div id=”tooltip”>
</div>
<div id=”caixa-texto”>
<div class=”texto” name=”1″>
Home
</div>
<div class=”texto” name=”2″>
Contato
</div>
</div>
</div>
Nada de mais também bem simples o texto que você irá adicionar com a classe “texto” e recebe uma numeração no atributo name para designar o conteudo que vai no tooltip
