Dúvida bem básica de JavaScript - Não sei como fazer o que está no Anexo

13 de janeiro de 2013 25 respostas

mariazinhahappy 13 de janeiro de 2013

Oiiii, queria que alguém me ajudasse a fazer o que está no Anexo, é JavaScript (acho), ao clicar no Link queria que a imagem aparece em abaixo, e não em outra página. Queria que ao clicar aparecesse assim que nem no Anexo:

25 Respostas

andredecotia 13 de jan. de 2013

Entendi q vc tá fazendo o mais simples possível, num HTML puro… Procurei elementos prontos no Twitter Bootstrap e no JQuery UI, mas não encontrei… Vc já começou alguma coisa?

mariazinhahappy 13 de jan. de 2013

isso mesmo que eu quero andredecotia o mais simples possivel. só tou utilizando html mesmo pois nao sei usar muito bem esses coisas de componentes prontos mas sei que o que estou pedindo é possivel de fazer pois ja vi funcionando. só que até agora nao tenho nada. quero so que quando clique no link nao direciona pra uma pagina com a foto e sim a foto fosse aberta na mesma pagina so que embaixo no link.

renandrade 13 de jan. de 2013

Essa imagem já vai estar disponível e vc só vai exibi-la ou precisará pegá-la no banco?
Se vc já tiver a imagem disponível, coloque-a inicialmente escondida (com css, vc pode utilizar no display:none) e quando o usuário clicar no link, exiba a imagem.
Exemplo com jquery:

<img id="imagem" src.... style="display:none" ...

Se a imagem não estiver disponível, e vc precisar pegar no banco de dados, no disco rigido, ou outro lugar, terá que usar ajax. Aí já é um pouco mais trabalhoso. Primeiro, responda minha pergunta, depois continuo tentando te ajudar.

mariazinhahappy 13 de jan. de 2013

editado.

pvrsouza 13 de jan. de 2013

Não sei seu nível de conhecimento com Jquery, mas em todo caso vale ressaltar que é necessário importar a biblioteca no seu arquivo:

<script type="text/javascript" 	src="contexto/caminho/do/seu/jquery-1.8.3.js"></script>

Abraços.

mariazinhahappy 13 de jan. de 2013

renandrade:
Essa imagem já vai estar disponível e vc só vai exibi-la ou precisará pegá-la no banco?
Se vc já tiver a imagem disponível, coloque-a inicialmente escondida (com css, vc pode utilizar no display:none) e quando o usuário clicar no link, exiba a imagem.
Exemplo com jquery:
<img id="imagem" src.... style="display:none" ...
Se a imagem não estiver disponível, e vc precisar pegar no banco de dados, no disco rigido, ou outro lugar, terá que usar ajax. Aí já é um pouco mais trabalhoso. Primeiro, responda minha pergunta, depois continuo tentando te ajudar.

oiiii, :roll:
vou ter que baixar o jquery né? é o jquery ui que o andredecotia falou no post dele? estou pesquisando no google e encontrei um monte de jqueri para baixar… voce poderia me enviar o linky?

mariazinhahappy 13 de jan. de 2013

pvrsouza:
Não sei seu nível de conhecimento com Jquery, mas em todo caso vale ressaltar que é necessário importar a biblioteca no seu arquivo:
<script type="text/javascript" 	src="contexto/caminho/do/seu/jquery-1.8.3.js"></script>
Abraços.

voce poderia me enviar o link?

pvrsouza 13 de jan. de 2013

mariazinhahappy:
renandrade:
Essa imagem já vai estar disponível e vc só vai exibi-la ou precisará pegá-la no banco?
Se vc já tiver a imagem disponível, coloque-a inicialmente escondida (com css, vc pode utilizar no display:none) e quando o usuário clicar no link, exiba a imagem.
Exemplo com jquery:
<img id="imagem" src.... style="display:none" ...
Se a imagem não estiver disponível, e vc precisar pegar no banco de dados, no disco rigido, ou outro lugar, terá que usar ajax. Aí já é um pouco mais trabalhoso. Primeiro, responda minha pergunta, depois continuo tentando te ajudar.

oiiii, :roll:
vou ter que baixar o jquery né? é o jquery ui que o andredecotia falou no post dele? estou pesquisando no google e encontrei um monte de jqueri para baixar… voce poderia me enviar o linky?

http://jquery.com/download/

[]'s

andredecotia 13 de jan. de 2013

Acredito que vc possa tb fazer da seguinte maneira abaixo, o lado bom da história é q vc já tem td nativo sem ter q baixar/importar nenhum componente terceiro:

No momento do

onClick="metodo"

Invocar:

document.getElementById('divID').appendChild(img);

André AS

andredecotia 13 de jan. de 2013

pvrsouza:
Não sei seu nível de conhecimento com Jquery, mas em todo caso vale ressaltar que é necessário importar a biblioteca no seu arquivo:
<script type="text/javascript" 	src="contexto/caminho/do/seu/jquery-1.8.3.js"></script>
Abraços.

Acredito q dê pra usar online, no seu caso, para efeito de teste, mapeando conforme abaixo:

<script type="text/javascript" 	src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

André AS.

mariazinhahappy 13 de jan. de 2013

estou tentando juntar tudo que voces estao me dizendo, mas ainda estou tento dificuldades, consegui chegar neste codigo mas nao esta funcionando

<html>

<head>
	 	<script type="text/javascript"   src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

	<script language="JavaScript">
		jQuery("#link").click(function() {
		jQuery("#imagem").show();
		});



	</script>
</head>
	<body>
		<a id="link" href="#imagem"> Clique Aqui<a/>
<img id="imagem" src="C:\Windows\Web\Wallpaper\Windows\img0.jpg" style="display:none"> </img>
	<body>
</html>

mariazinhahappy 13 de jan. de 2013

mesmo local continua nao funcionando

<script type="text/javascript"   src="C:\jquery-1.8.3.min.js"></script>

renandrade 13 de jan. de 2013

Experimente tirar a tag de dentro do head e coloca-la em outro lugar. Pode ser dentro do body ou do html

mariazinhahappy 13 de jan. de 2013

esta importado correto porque o olamundo está funcionando

<script language="JavaScript">
		$(document).ready(function
		() {
		       alert('olá mundo');
});



	</script>

renandrade 13 de jan. de 2013

<html>  
  
<head>  
        <script type="text/javascript"   src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
  
</head>  
    <body>  
        <a id="link" href="#imagem"> Clique Aqui<a/>  
<img id="imagem" src="C:\Users\Renan\Downloads\a.png" style="display:none"> </img>  
    <body>  

<script language="JavaScript">  
        jQuery("#link").click(function() {  
        jQuery("#imagem").show();  
        });  
  
  
  
    </script>  



</html>

Testei aqui e funcionou. Só troque o link da sua imagem

mariazinhahappy 13 de jan. de 2013

nao funcionou

renandrade 13 de jan. de 2013

renandrade:

<html>  
  
<head>  
        <script type="text/javascript"   src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
  
</head>  
    <body>  
        <a id="link" href="#imagem"> Clique Aqui<a/>  
<img id="imagem" src="C:\Users\Renan\Downloads\a.png" style="display:none"> </img>  
    <body>  

<script language="JavaScript">  
        jQuery("#link").click(function() {  
        jQuery("#imagem").show();  
        });  
  
  
  
    </script>  



</html>

Testei aqui e funcionou. Só troque o link da sua imagem

Nem copiando e colando esse código funcionou?

mariazinhahappy 13 de jan. de 2013

renandrade:

<html>  
  
<head>  
        <script type="text/javascript"   src="http://code.jquery.com/jquery-1.8.3.min.js"></script>  
  
</head>  
    <body>  
        <a id="link" href="#imagem"> Clique Aqui<a/>  
<img id="imagem" src="C:\Users\Renan\Downloads\a.png" style="display:none"> </img>  
    <body>  

<script language="JavaScript">  


        jQuery("#link").click(function() {  
        jQuery("#imagem").show();  
        });  
  
  
  
    </script>  



</html>

Testei aqui e funcionou. Só troque o link da sua imagem

nossa, funcionou mesmo. mas nao entendi porque funcionou so porque colocou o trecho de codigo do jquery no body

<script language="JavaScript">  


        jQuery("#link").click(function() {  
        jQuery("#imagem").show();  
        });  
  
  
  
    </script>

e deixar o a href em cima do jquery e não abaixo, pois embaixo nao funcionou tambem

<a id="link" href="#imagem"> Clique Aqui<a/>
        <img id="imagem" src="C:\Windows\Web\Wallpaper\Windows\img0.jpg" style="display:none"> </img>
	<script language="JavaScript">
			jQuery("#link").click(function() {
			jQuery("#imagem").show();
			});



	</script>

alguem pode me responder?

renandrade 13 de jan. de 2013

Acredito que não seja possível usar o script dentro do head. Mesmo que seja possível, é uma boa prática utilizar javascript no fim da sua página, para uma performance melhor do seu código.

mariazinhahappy 13 de jan. de 2013

poderia colar o codigo e renderizar? minha duvida é, sempre que eu tiver um link novo vou ter que criar novo jquery?

<html>
	<head>
			<script type="text/javascript"   src="C:\jquery-1.8.3.min.js"></script>
	</head>
		<body>
			<a id="link" href="#imagem">Clique Aqui<a/>
			<img id="imagem" src="http://google.com/images/logo.gif" style="display:none"></img><br />

			<a id="link1" href="#imagem1">Clique Aqui<a/>
			<img id="imagem1" src="http://google.com/images/logo.gif" style="display:none"></img><br />

			<script language="JavaScript">
				jQuery("#link").click(function() {
				jQuery("#imagem").show();
				});
			</script>
			<script language="JavaScript">
							jQuery("#link1").click(function() {
							jQuery("#imagem1").show();
							});
			</script>
		<body>
</html>

mariazinhahappy 13 de jan. de 2013

consegui fazer de outra maneira, seguindo a dica do andredecotia, so que se eu clicar 50 vezes vai aparecer a imagem na tela 50 vezes tipo vai concatenando e eu so queria que aparece 1 uma unica vez, é possivel fazer isso? alguem pode me ajudar?

pra testar é só colar o codigo no html

<html>

<head>
	<script language="JavaScript">
    function add_google_logo(param) {
        var src = "http://google.com/images/logo.gif";
        show_image("http://google.com/images/logo.gif", 276,110, "Google Logo", param);
    }


    function show_image(src, width, height, alt, param) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;



        document.getElementById(param).appendChild(img);
    }

	</script>
</head>
	<body>

    <div id="rs1">
    rs1     <button onclick="add_google_logo('rs1');">rs1</button><br />

    </div>

    <div id="rs2">
    rs2     <button onclick="add_google_logo('rs2');">rs2</button><br />

    </div>

    <div id="rs3">
    rs3     <button onclick="add_google_logo('rs3');">rs3</button><br />

    </div>

    <div id="rs4">
    rs4     <button onclick="add_google_logo('rs4');">rs4</button><br />

    </div>

    <div id="rs5">
    rs5     <button onclick="add_google_logo('rs5');">rs5</button><br />

    </div>

	<body>
</html>

andredecotia 13 de jan. de 2013

mariazinhahappy:

<html>

<head>
	<script language="JavaScript">
    function add_google_logo(param) {
        var src = "http://google.com/images/logo.gif";
        show_image("http://google.com/images/logo.gif", 276,110, "Google Logo", param);
    }


    function show_image(src, width, height, alt, param) {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;



        document.getElementById(param).appendChild(img);
    }

	</script>
</head>
	<body>

    <div id="rs1">
    rs1     <button onclick="add_google_logo('rs1');">rs1</button><br />

    </div>

    <div id="rs2">
    rs2     <button onclick="add_google_logo('rs2');">rs2</button><br />

    </div>

    <div id="rs3">
    rs3     <button onclick="add_google_logo('rs3');">rs3</button><br />

    </div>

    <div id="rs4">
    rs4     <button onclick="add_google_logo('rs4');">rs4</button><br />

    </div>

    <div id="rs5">
    rs5     <button onclick="add_google_logo('rs5');">rs5</button><br />

    </div>

	<body>
</html>

À princípio, creio q vc poderia criar uma condição lógica como um Array no JS sempre que um id for clicado este id seria adicionado no array, logo, sempre que clicar antes de efetivar passa pelo if (existe no array?) se sim não efetiva se não efetiva. Efetivar quero dizer aplicar a linha abaixo:

document.getElementById(param).appendChild(img);

mariazinhahappy 13 de jan. de 2013

e como faz isso?

andredecotia 13 de jan. de 2013

mariazinhahappy:
e como faz isso?

Dei uma mudadinha de conceito, utilizei o q fora empregado acima, e implementei:

<html>
	<head>
		<script language="JavaScript">

		function verImg(idImgToShow) {
			document.getElementById(idImgToShow).style.display = "inline";
		}

		</script>
	</head>
	<body>

	rs1 <button onclick="verImg('img1');">rs1-botão</button><br />

	<div id="rs1">
		<img id='img1' src="c:/test.jpg" style="display:none"></img>
	</div>

	rs2 <button onclick="verImg('img2');">rs2-botão</button><br />

	<div id="rs2">
		<img id='img2' src="c:/test.jpg" style="display:none"></img>
	</div>

	rs3 <button onclick="verImg('img3');">rs3-botão</button><br />

	<div id="rs3">
		<img id='img3' src="c:/test.jpg" style="display:none"></img>
	</div>


	<body>
</html>

Testei e está do jeitinho q vc pediu.

mariazinhahappy 13 de jan. de 2013

muito obrigada a todos por me ajudar.

andredecotia, o seu ultimo codigo e exatamente o que eu queria…

Criado 13 de janeiro de 2013

Ultima resposta 13 de jan. de 2013

Respostas 25

Participantes 4

25 Respostas

Topicos relacionados