[Ajuda] Botões HTML

[Skyon]

Primeiro de tudo, boas a todos. Sou "recém-nascido" aqui no fórum e inauguro a minha chegada com uma dúvida que tenho para um projecto na minha faculdade.

Gostaría de criar um botão no site como o que está neste site: aqui (ou seja, com uma pequena imagem e texto à frente) e que quando se carregasse nele ele abrisse um site definido na mesma página... Tenho conhecimentos quase nulos em HTML e precisava de saber como fazer isto, era urgente...

Encontrei na net estes códigos...

<button>
<onClick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

O problema é:

- não efectua nenhuma acção quando carrego no botão

- a imagem fica a que eu escolhi depois de pôr o código mas algum tempo depois muda para outra que não consigo perceber qual é...

O outro código para um botão que tinha era:

<form action="http://www.google.com">
<input type = "submit" value = "Nome"
</form>

Só que não tem a imagem e eu gostava que desse para ver uma pequena imagem no botão...

Alguém me podería ajudar?

[softklin]

Bem, respondendo à primeira dúvida, sobre o link, tens o código quase correcto, experimenta desta maneira:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

o onclick é uma propriedade do button, daí ter de ser definido na mesma tag.

O facto da imagem mudar "algum tempo depois" é estranho. Esse tempo é depois de clicares nele, ou tens outro código que rode imagens, etc?

[Skyon]

Bem, respondendo à primeira dúvida, sobre o link, tens o código quase correcto, experimenta desta maneira:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

o onclick é uma propriedade do button, daí ter de ser definido na mesma tag.

O facto da imagem mudar "algum tempo depois" é estranho. Esse tempo é depois de clicares nele, ou tens outro código que rode imagens, etc?

Vou experimentar o código e já ponho feedback.

Não, muda sem eu carregar no botão e não tenho nenhum código para rodar a imagem, o botão está escrito com esse primeiro código e onde está o "imagem.jpg" tenho o link da imagem...

[Skyon]

Reparei que a imagem, onde antes estava a foto de uma árvore agora aparece isso. O que aconteceu é que eu tinha a tab aberta por definição (estava guardada na sessão anterior do meu browser) e, sempre que eu vía que a imagem estava diferente voltava a copiar o endereço da imagem (que na página que eu tinha aberta estava correcta) e voltava a colar no código e a imagem voltava a aparecer correctamente no botão...

Penso que seja isso...

[Skyon]

O código resultou, obrigado softclean  😛

Já agora, aproveito, se não for muito abuso, para perguntar 2 coisas, estas duas não tão urgentes:

- há maneira de eu mudar o estilo do botão? para que fique com um design diferente?

- acho que ficaría melhor uma borda à volta da imagem e já tentei colocá-la mas não aparece :S

O código que estava a utilizar era:

<button onclick="window.location='http://www.google.com'">
<tr>
<td width="19%"><img src="imagem.jpg" height="50" width="40" border="3" /></td>
<td width="81%"><b>Nome</b></td>
</tr>
</table>
</button>

[softklin]

Ah, estás a fazer uma coisa chamada hotlinking, ou seja, estás a ligar directamente a imagem para outro site que não é teu, e alguns quando detectam essa situação, trocam as imagens.

Uma solução será copiares a imagem correcta (botão direito na imagem, save as) e coloca-la na mesma pasta que a página html. Por fim, o endereço da imagem é o nome da imagem que gravaste, por exemplo, se a imagem de chamar "arvore.jpg", é isso que colocas no campo "src" da tag "img" (imagem).

---

A questão do estilo do botão, podes criar uma imagem no teu editor de imagens preferido, e colocá-la como um botão, ou seja, algo assim:

<a href="http://site.para.onde.queres.ir.com/"><img src="botao.jpg" border="0" /></a>

Em que "botao.jpg" era o teu botão desenhado sob forma de uma imagem.

[Skyon]

Ah, estás a fazer uma coisa chamada hotlinking, ou seja, estás a ligar directamente a imagem para outro site que não é teu, e alguns quando detectam essa situação, trocam as imagens.

Uma solução será copiares a imagem correcta (botão direito na imagem, save as) e coloca-la na mesma pasta que a página html. Por fim, o endereço da imagem é o nome da imagem que gravaste, por exemplo, se a imagem de chamar "arvore.jpg", é isso que colocas no campo "src" da tag "img" (imagem).

---

A questão do estilo do botão, podes criar uma imagem no teu editor de imagens preferido, e colocá-la como um botão, ou seja, algo assim:

<a href="http://site.para.onde.queres.ir.com/"><img src="botao.jpg" border="0" /></a>

Em que "botao.jpg" era o teu botão desenhado sob forma de uma imagem.

A questão é que eu estou a usar um fornecedor de criação de sites, não criei o meu próprio com um programa e o tenho alojado num domínio, ou seja, não tenho a possibilidade de alojar as imagens numa pasta como estás a dizer  😛

[softklin]

Ok, então guardas a imagem na mesma no teu computador, e podes sempre fazer upload para o tinypic, eles dão-te o endereço da imagem que podes usar directamente, sem problemas. Depois com esse endereço, basta colares no teu código HTML, como estavas a fazer.

http://tinypic.com/

[Skyon]

Ok, então guardas a imagem na mesma no teu computador, e podes sempre fazer upload para o tinypic, eles dão-te o endereço da imagem que podes usar directamente, sem problemas. Depois com esse endereço, basta colares no teu código HTML, como estavas a fazer.

http://tinypic.com/

Ah, óptima solução então  😛

Para finalizar, e desculpa o tempo que te estou a ocupar, há possibilidade de usar imagens de botões já pré-definidos, ou seja, disponibilizados por outras pessoas na internet? E se sim, uso o mesmo código que me deste caso fosse eu a desenhar o botão?

[softklin]

Sim, como se trata de uma imagem, podes usar outras da internet. O que te recomendo é a copiares sempre para o teu computador as imagens e fazeres o upload para o site de imagens, por exemplo, o Tinypic, que te indiquei 😛 Assim tens a garantia que a imagem não desparece ou é substituída por outra.

Para botões, podes fazer uma pequena pesquisa, existe bastante coisa:

http://www.google.pt/search?q=web%20buttons

[Skyon]

Sim, como se trata de uma imagem, podes usar outras da internet. O que te recomendo é a copiares sempre para o teu computador as imagens e fazeres o upload para o site de imagens, por exemplo, o Tinypic, que te indiquei 😉 Assim tens a garantia que a imagem não desparece ou é substituída por outra.

Para botões, podes fazer uma pequena pesquisa, existe bastante coisa:

http://www.google.pt/search?q=web%20buttons

Obrigadíssimo por toda a ajuda  😄 espero poder aprender mais sobre programação a curto e médio-prazo e, assim, passar a ver cá mais vezes  😄

[softklin]

HTML não é difícil de aprender, e para quem dizia que tinha conhecimentos nulos de HTML, já estás a fazer umas coisas porreiras. 😉

Se quiseres aprender sobre HTML, que não é nada difícil, e até acho que é uma mais valia, por exemplo, para editar aqueles temas gratuitos para blogs, podes visitar o site da w3schools, ou qualquer outro tutorial sobre HTML, que se acha facilmente na web.

[Skyon]

Cá estou eu outra vez com outra dúvida (só assim é que aprendemos, não é?) 😛

Bem, o que me traz aqui nem é bem uma dúvida é mais um problema... Continuo a trabalhar no meu site e surgiu-me uma situação que eu não estou a conseguir resolver... Quería escrever um nome numa página e que ficasse com letras grandes pois era algo importante. A verdade é que o editor de texto incluído no editor do site não me está a permitir colocar o texto no tamanho que pretendo, quando gravo o texto mantém-se no mesmo tamanho.

Foi então que pensei em usar um código em HTML para colocar o texto como quería. Até experimentei no w3schools e resultou no que eu quería. Só que quando coloquei no site vía-se que o texto estava no tamanho pretendido e estilizado da maneira pretendida mas estava como que "cortado" superior e inferiormente e não consigo resolver isso :S

Se me pudessem ajudar, agradecía...

EDIT:

Já me esquecía... O código que usei foi este:

<html>
<body>
<font size="10"><b><i>Acer</i></b></font>
</body>
</html>

[softklin]

Experimenta também definir a altura da linha:

<p style="font-size: 10px; line-height: 15px">O teu texto com as formatações que queres aqui</p>

NOTA: aquele style, com aqueles valores que coloquei, é chamado CSS, que te permite definir tudo o quanto é estilo para qualquer tag de HTML. Neste caso, defini a propriedade de CSS line-height, que também podes ver no site da w3schools:

http://www.w3schools.com/css/pr_dim_line-height.asp

[Skyon]

Obrigado, resultou, já consegui colocar bem o texto 😛

[sergio-_17]

Boas Tardes

estou com um problema em usar o html, e precisava de uma ajudinha,

pretendo criar uns botões com hiperligações para outro site por exemplo e tentei

usar os scripts que tem colocado e modificando para o meu site,

o que acontece é que quando uso o codigo que penso estar correcto ao guardar no Joomla

fica sem:

<onclick="window.location='http://www.google.com'">

mais a baixo já coloco o código todo, e ao guardar desaparece sempre esta expressão do código.

Eu uso o joomla 1.5.25 PT-PT,

Se alguém me puder ajudar!!

</p>
<input name="name" type="button" onclick="window.location='http://www.google.com'" value="Página Oficial do Fabricante" />
</td>

Edited October 22, 2012 at 03:11 PM by sergio-_17