criar botão

[pmlv]

ola a todos,

como faço para criar um botão em html que faça o seguinte:

Ao clicar, o botão irá abrir uma nova pagina tipo pop-up e automaticamente desaparecia.

imaginem um botão a dizer "clicar para fechar" e ao clicar nele o botão desaparecia mas abria uma janela popup

Se não der para fazer com um botoao podem me explicar como fazer por exemplo com uma imagem ou com texto tipo hyperlink

alguém me ajuda????

obg

Editado Dezembro 18, 2009 por pmlv

[Thelon]

Da para fazer sim mas com JavaScript

vou mover para o fórum e lá te auxiliaram melhor

[SK15]

Não entendi seria isso? Tipo tem o botão a pessoa clica e esse botão some só que uma pop-up se abre ...

Se sim veja esse pequeno exemplo:

<script>
function AbreEsconde(obj_button) {
 window.open("http://www.ig.com.br", "_janela", "width=500,height=50");
 obj_button.style.display = "none";
}
</script>

<form>
<input type="button" value="Clicar para Fechar" onClick="AbreEsconde(this);">
</form>

Editado Dezembro 20, 2009 por SK15

[pmlv]

SK15 é mesmo isso que queria.

Já agora da para colocar uma imagem e ao carregar no botao ele abre o popup e o botao e a imagem some????

o que quero ao certo é o seguinte: colocar uma imagem que ocupa um determinado local e quero que ao carregar no botao, este abra uma popup e quer ele quer a imagem desaparecem. é possivel?

obg

Editado Dezembro 18, 2009 por pmlv

[Rafael Laurindo]

Esse linha é justamente para isso, para mostrar um objeto

obj_button.style.display = "none";

Veja esse exemplo

function hideElements(classe){
    var el = document.getElementsByClassName(classe)
    tam = el.length;
    for (var i = 0; i < tam; i++)
        el[i].style.display = 'block'
}

Esse código faz com que todos os elementos pertencentes a classe informada sejam escondidos. Testa aew, porque eu n testei. Ah, e para dar certo, você deve definir um mesmo class para cada elemento, no seu caso, para os dois elementos, a imagem e o botão.

Editado Dezembro 19, 2009 por Rafael Laurindo

[pmlv]

olá,

como faço para em vez de ser botao colocar uma imagem a abrir uma popup e depois sumir????

eu não percebo muito em mexer em código java

eu para agora tenho o seguinte codigo:

<script type="text/javascript">
function AbreEsconde(obj_button) {
window.open("http://www.google.pt", "_janela", "width=100,height=100");
obj_button.style.display = "none";
}
</script>
<div id="button" style="position:absolute; left:19px; top:178px; z-index:1; height:36px; width:327px">
    <input type="button" value="Clique aqui e ajude o site" onClick="AbreEsconde(this);" style="color: #FF0000; font-weight: bold; font-size:24pt; text-align:left"></div>

obg

Editado Dezembro 20, 2009 por Jonathan Queiroz
Adicionar tag's (Jonathan)

[Vinicci]

olá,

como faço para em vez de ser botao colocar uma imagem a abrir uma popup e depois sumir????

</script>

<div id="button" style="position:absolute; left:19px; top:178px; z-index:1; height:36px; width:327px">

<input type="button" value="Clique aqui e ajude o site" onClick="AbreEsconde(this);" style="color: #FF0000; font-weight: bold; font-size:24pt; text-align:left"></div>

Olá caro pmlv.

Pelo que pude entender, você tem um fomulário, e quando o visitante clicar sobre o botão do formulário você quer que o botão desapareça da tela, agora porém você quer ao invés de um botão e um formulário seja uma imagemc, certo?

Primeiro defina uma classe para o elemento que quer esconder, nesse caso sua imagem. Como ela deve ser clicada pelo visitante para que seja aberta outra página, faça um link na sua imagem para que fique claro para o visitante do site que a imagem deve ser clicada:

<a href="outra_pag.html" target="_blank"> <img src="sua_pic.jpg" class="imgSome" /> </a>

Agora devemos fazer com que a imagem, após clicada, desapareça. Portanto utilizamos o javascript (mas acho que daria para utilizar css também com o atributo display: hidden....). Utilizando o código que o Rafael indicou, pegamos a classe criada para a sua imagem, verificamos suas dimensões e fazemos com que fique invisível a área que a imagem ocupa na tela, assim:

function imgEsconder(classe){ /*Onde classe é aquela que você criou na tag <img>*/

var el = document.getElementsByClassName(classe) /*Mesmo que no anterior. É o nome da classe que você criou para a sua imagem*/

tam = el.length; /* Verifica as dimensões da imagem*/

for (var i = 0; i < tam; i++)

el.style.display = 'block' /* Esconde sua imagem, tornando invisível o espaço que ela ocupa*/

}

Com a função criada, chamamos ela no evento onClick do link, seu código HTML ficará assim:

<a href="outra_pag.html" target="_blank" onClick="imgEsconder(classe)"> <img src="sua_pic.jpg" class="imgSome" /> </a>

Creio que seja isso. Aguardamos seu feedback.

Teh mais!

[SK15]

É quase a mesma coisa .... só mudar um pouco que resolve :P

<script>
function AbreEsconde() {
 window.open("http://www.ig.com.br", "_janela", "width=500,height=500");
 document.getElementById("pop-image").style.display = "none";
}
</script>

<img src="image.jpg" border="0" id="pop-image" onClick="AbreEsconde();">

[pmlv]

ok funcionou.

outra pergunta.

Como faço se for por exemplo tenho um iframe de uma pagina que contem links. ao clicar nesses links keria k abrisse a popup e que o iframe desaparecesse.

ajuda????

obg

[Rafael Laurindo]

Todo objeto de seu código HTML tem, ou pode ter um id, isso significa que o id, serve para identificar de forma única, ou seja, irrepetitível os objetos, então se você definir um para o tal iframe, e usar os métodos que foram passados para você para esconder objetos, pode ter certeza que isso acontecerá. Você precisa também usar sua lógica, nesse seu caso, você deve chamar uma function criada para esconder o objeto informado, função essa que será acionada quando você clicar nalgum link, certo? Então defina um evento e faça isso para todos os links. Akeleabrass. Se não entender poste aew.

Editado Dezembro 21, 2009 por Rafael Laurindo

[pmlv]

é assim os links que aparecem do iframe são links externos logo não posso alterar. O que queria era que a clicar num desses links o iframe desaparecesse e o link abrisse num popup.

se puderes ajudar agradeço.

obg

[Rafael Laurindo]

Na verdade, esses links você pode alterar sim meu amigo, você não pode alterar o HTML, mas os links, sim. Exemplo <a href="http://www.google.com.br" id='google' onclick="sua função">Google</a>.Entendeu?

Editado Dezembro 21, 2009 por Rafael Laurindo

[pmlv]

sim já percebi.

Mas eu também não pretendo alterar os links, por enquanto. apenas quero que ao clicar num deles o iframe da pagina que os contem suma e que o respectivo link abra numa popup.

Para uma imagem este código deu bem

<script>
function AbreEsconde() {
window.open("http://www.ig.com.br", "_janela", "width=500,height=500");
document.getElementById("pop-image").style.display = "none";
}
</script>

<img src="image.jpg" border="0" id="pop-image" onClick="AbreEsconde();">

agora não consigo colocar a iframe.

como explicou <a href="http://www.google.com.br" id='google' onclick="sua função">Google</a>

"sua função" é neste caso o AbreEsconde? se sim como declaro o iframe??

obg

[Rafael Laurindo]

Sim, "sua função" seria a "abreEsconde". No iframe você abrirá uma página que contém esses links de uma página que pertence a outra pessoa, aew você deseja abrir uma pop-up ao clicar num desses. É isso que entendi? Nesse caso, só existe uma solução que eu conheça, você cria sua própria página que contém esse link como no esquema que te mostrei anteriormente, do contrário esses links deveriam estar programados para fazer tal coisa.

Editado Dezembro 22, 2009 por Rafael Laurindo

[pmlv]

sim é +- isso que falou.

Rafael só uma pergunta para terminar.

Tenho 1 iframe. o iframe é uma pagina minha que tem uma imagem e que ao clicar na imagem ela desaparece e abre um popup. ate ai eu consigo. só não consigo fazer o seguinte: ao clicar na imagem abre um popup e a imagem desaparece só que o iframe ainda continua lá.

como faço para fechar esse iframe ao clicar na imagem que esta dentro desse iframe???

obrigada

Editado Dezembro 22, 2009 por pmlv

[Rafael Laurindo]

Você tentou fazer do jeito que falei? Definir um id na tag do iframe, criar uma função para isso, que já foi explicado como dazer objetos desaparecerem, definir um evento para chamar essa função?

[pmlv]

sim rafael

por exemplo

<script>

function AbreEsconde() {

window.open("http://www.ig.com.br", "_janela", "width=500,height=500");

document.getElementById("pop-image").style.display = "none";

}

</script>

abre ao clicar na imagem abre uma popup e faz sumir a imagem. eu para fazer desaparecer o iframe ainda não consegui. ando as voltas com a funcao e não consigo.

podes ajudar?? podes colocar codigo de exemplo???

obg

[Rafael Laurindo]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Enviando texto</title>
<script>
function showHiddenByClass(classe) {
    var el = document.getElementsByClassName(classe)
    var tam = el.length
    window.open("http://www.ig.com.br", "_janela", "width='500'", "height='500'");
    for(var i=0; i < tam; i++)
        el[i].style.display = "none"
}
</script>
</head>
<body>
<img src="http://www.ig.com.br/" onclick="showHiddenByClass(this.className)" class="hidden" />
<iframe frameborder="0" scrolling="auto" class="hidden"></iframe>
</body>
</html>

Testa aew mocinha.

Editado Dezembro 23, 2009 por Rafael Laurindo

[pmlv]

olha Rafael não funciona.

eu coloco o codigo que disseste

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

<title>Enviando texto</title>

<script>

function showHiddenByClass(classe) {

var el = document.getElementsByClassName(classe)

var tam = el.length

window.open("http://www.ig.com.br", "_janela", "width='500'", "height='500'");

for(var i=0; i < tam; i++)

el.style.display = "none"

}

</script>

</head>

<body>

<img src="http://www.ig.com.br/" onclick="showHiddenByClass(this.className)" class="hidden" />

<iframe frameborder="0" scrolling="auto" class="hidden"></iframe>

</body>

</html>

aqui onde coloco o endereço do iframe que vai desaparecer???

[Rafael Laurindo]

Você não vai colocar o endereço, mas sim o id, com o código document.getElementById('id do iframe').style.display = 'none'. Peço-te que poste seus códigos entre as tags "

" ou "

" sem as aspas

Editado Dezembro 28, 2009 por Rafael Laurindo