Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafa_mv_zl

redimensionar imagem e colocar link para vê-la no tamanho original

Por , em Javascript

Recommended Posts

rafa_mv_zl    0

rafa_mv_zl
Postado

oi galera... eu tava tentando fazer o q o título diz:

 

redimensionar a imagem e colocar link para vê-la no tamanho original...

 

isso será usado em um fórum php que carrega as imagens nos posts... dae eu queria colocar um script para q, caso houvesse uma imagem dentro de um div de uma determinada class (digamos class="postmessage") q ele redimensionasse as imagens dos divs dessa classe, caso as imagens fossem maiores q determinada largura...

 

além disso, eu gostaria de inserir um link q abriria em nova janela a imagem original (esse efeito todo q eu descrevi é um comportamento até q bem comum nos sites por aí)...

 

soh q eu não tenho experiencia em javascript.. eu programo em java... dae li uns tutoriais e arriskei algumas coisas e cheguei em algo bom.. porém ainda não estou satisfeito...

 

o q eu consegui fazer foi assim:

 

<script


<script>

var larguraLimite = 500; 

var imagens = document.getElementsByTagName('img');

 for(var i = imagens.length-1; i>-1; i--){
  
   if(imagens[i].width > larguraLimite){
	   
	   imagens[i].width = larguraLimite;
	   imagens[i].onclick=function(){
				window.open('http://ccvteam.com','');
				return false;
				 };
   }
  
 }


</script>

os problemas disso são:

- qdo coloco o mouse em cima da imagem pelo firefox não vira a "mãozinha" de link... será q pra virar mãozinha é melhor adicionar uma tag de link (< a > ) em volta da tag de imagem (mas eu não faço idéia de como fazer isso)? uma outra opção mais "porca" é carregar a mãozinha como cursor do mouse ao disparar o evento "onmouseover"...

 

- eu estou redimensionando para um tamanho fixo, eu gostaria de redimensionar para um valor da forma: "largura da tela do usuário - K" onde K é uma constante q eu vou definir... (provavelmente será o tamanho da parte eskerda dos posts... q dae a figura encaixará na parte direita bonitinho.. independente de resolução

 

- não consegui passar como parametro para a função o valor do link original da imagem.. eu tentei passar o argumento: imagem.getAttribute('src'), mas não funcionou.. alguma luz?

 

- como faço para especificar para ele pegar apenas as imagens q estão dentro de um div especifico... sabendo q todos os divs estarão com essa mesma class???

 

bom.. espero q vcs experts em javascript possam por favor me ajudar... acho q dah pra ver q tenho uma noção.. soh não sei as manha q vem com experiencia... e acho q o q eu quero está bem definido.. então será fácil ajudar...

 

obrigado..

Compartilhar este post

Link para o post
Compartilhar em outros sites

GuttoSP    2

GuttoSP
Postado

Testa esses codes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
	window.onload = function() {
		var larguraLimite = 100;
		var imagens = document.getElementsByTagName('img');
		//alert(imagens.length);
		for(var i = 0; i < imagens.length; i++){  
		   if(imagens[i].width > larguraLimite){	  
			   imagens[i].width = larguraLimite;
			   imagens[i].onclick = function(){
			 //  alert(this.src);
				window.open('abreImg.html?src='+this.src,'pop','top=0, left=0, scrollbars=no, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');
				return false;
			  }
		   }  
		}
	}	
</script>
<style type="text/css">
<!--
.postmessage {
cursor: pointer;
cursor: hand; }
-->
</style></head>
<body>
<!-- Altere as imagens -->
<div class="postmessage"><img src="Banner-Classificados.gif"></img><img src="0,9310,638122_3,00.jpg"></img><img src="http://www.procuretudo.com.br/GuttoSP.png"></img></div>
</body>
</html>

abreImg.html

<html>
<head>
<title>Imagem</title>
<script language="javascript">
	var i=0;
	function resize() {
		var url = document.location.href;
		var imagem = url.split('/');
		if (imagem.length == 1) {
			var imagem = url.split("\\");	
		}
		imagem = imagem[imagem.length-1];
		//alert(imagem);
		document.getElementById('imgAmpliada').src = imagem;
	if (navigator.appName == 'Netscape') i=40;
	if (document.images[0]) window.resizeTo(document.images[0].width +10, document.images[0].height+60-i);
	}
</script>
</head>
<body onload="resize();" leftmargin="0" topmargin="0">
<img name="imgAmpliada" id="imgAmpliada" src="" border="0" align="center">
</body>
</html>

- qdo coloco o mouse em cima da imagem pelo firefox não vira a "mãozinha" de link... será q pra virar mãozinha é melhor adicionar uma tag de link (< a > ) em volta da tag de imagem (mas eu não faço idéia de como fazer isso)? uma outra opção mais "porca" é carregar a mãozinha como cursor do mouse ao disparar o evento "onmouseover"...

Resolvido com CSS

<style type="text/css">
<!--
.postmessage {
cursor: pointer;
cursor: hand; }
-->
</style>

- eu estou redimensionando para um tamanho fixo, eu gostaria de redimensionar para um valor da forma: "largura da tela do usuário - K" onde K é uma constante q eu vou definir... (provavelmente será o tamanho da parte eskerda dos posts... q dae a figura encaixará na parte direita bonitinho.. independente de resolução

redimensionar a imagem e colocar link para vê-la no tamanho original...

Como está atualmente, o script verifica as dimensões da imagem e redimensiona a pop-up de acordo.

 

- não consegui passar como parametro para a função o valor do link original da imagem.. eu tentei passar o argumento: imagem.getAttribute('src'), mas não funcionou.. alguma luz?

JAVASCRIPT
window.open('abreImg.html?src='+this.src,'pop','top=0, left=0, scrollbars=no, status=no, toolbar=no, location=no, directories=no, menubar=no, resizable=no, fullscreen=no');

A função pega o src da imagem clicada e envia para a pop-up.

 

- como faço para especificar para ele pegar apenas as imagens q estão dentro de um div especifico... sabendo q todos os divs estarão com essa mesma class???

Não entendi. Testa e posta o resultado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleberSP    0

KleberSP
Postado

em vez de window open

eu usei onclick pois estva pegando um caminho com uma varivael em asp e eu queria que abri-se em outra pagina, mais da caminho errado, então fiz o onclick e coloquei o link aonde queria

 

CODE
<script>

window.onload = function() {

var larguraLimite = 100;

var imagens = document.getElementsByTagName('img');

//alert(imagens.length);

for(var i = 0; i < imagens.length; i++){

if(imagens.width > larguraLimite){

imagens.width = larguraLimite;

imagens.onclick = function(){

// alert(this.src);

window.open('abreImg.html?src='+this.src,'pop','top=0, left=0, scrollbars=no, status=no, toolbar=no,

location=no, directories=no, menubar=no, resizable=no, fullscreen=no');

return false;

}

}

}

}

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito