Help
Com este script, usando o próprio mouse você conseguirá redimensionar imagens ao arrastá-las, dentro de uma página, podendo assim visualizá-las maiores na hora, dentro de um limite estabelecido.
Clicando na imagem, mantendo o mouse pressionado e arrastando para a diagonal, será possível ver a imagem "crescendo", e conforme for a qualidade da mesma, você poderá estipular um valor limite para expandir, para ela não perder qualidade, podendo assim interagir em todas as imagens e visualizá-las maiores quando bem quiser.
É importante não esquecer de colocar no BODY do documento o seguinte:
onload="load_img=true;"
Que no caso, irá capturar as dimensões da imagem, trazendo para a função e trabalhando com elas, para quando forem arrastadas, aplicar o efeito de "zoom" alterando assim o tamanho até onde foi estipulado na função.
O código encontra-se comentado, para evitar maiores dúvidas ou problemas.
Baseando-se nesse exemplo, ficará bem fácil de aplicar o mesmo efeito em novas imagens.
Lembrando que, caso tiver mais que 1 imagem na página, é necessário trocar o nome (NAME) de cada uma delas, para não causar conflito com a função. Use nomes diferentes, nunca nomes iguais!
Segue o código:
QUOTE
<html>
<head>
<title>Redimensionando Imagens Usando o Mouse</title>
<script language="JavaScript">
tamanhoX=115; // largura original da imagem
tamanhoY=80; // altura original da imagem
minimoX = 115; // largura mínima da imagem
minimoY = 80; // altura mínima da imagem
maximoX = tamanhoX*6; // largura de alcance máximo da imagem (largura 6 vezes maior que a original, na qual pode ser modificada mudando apenas o valor multiplicado)
maximoY = tamanhoY*6; // altura de alcance máximo da imagem (altura 6 vezes maior que a original, na qual pode ser modificada mudando apenas o valor multiplicado)
//as funções abaixo irão redimensionar e estabilizar a imagem, sendo assim, não há necessidades de alterações em suas características.
load_img = false;
function redimensiona(arrasta,imag){
if (load_img){
posX = eval("document."+imag+".offsetLeft");
posY = eval("document."+imag+".offsetTop");
tamanho_novoX = arrasta.x;
tamanho_novoY = arrasta.y;
tamanho_novoX = tamanho_novoX - posX;
tamanho_novoY = tamanho_novoY - posY;
if (tamanho_novoX >= maximoX) tamanho_novoX = maximoX;
if (tamanho_novoY >= maximoY) tamanho_novoY = maximoY;
if (tamanho_novoX <= minimoX) tamanho_novoX = minimoX;
if (tamanho_novoY <= minimoY) tamanho_novoY = minimoY;
eval("document."+imag+".width=tamanho_novoX");
eval("document."+imag+".height=tamanho_novoY");
}
}
function original(imag){
if (load_img){
eval("document."+imag+".width=tamanhoX");
eval("document."+imag+".height=tamanhoY");
}
}
</script>
</head>
<body bgcolor="#000000" onload="load_img=true;">
<img src="http://www.freecode.com.br/topo/topo_r3_c20.jpg" name="imagem1" onDrag="redimensiona(event,this.name)" onClick="original(this.name)">
</body>
</html>
<head>
<title>Redimensionando Imagens Usando o Mouse</title>
<script language="JavaScript">
tamanhoX=115; // largura original da imagem
tamanhoY=80; // altura original da imagem
minimoX = 115; // largura mínima da imagem
minimoY = 80; // altura mínima da imagem
maximoX = tamanhoX*6; // largura de alcance máximo da imagem (largura 6 vezes maior que a original, na qual pode ser modificada mudando apenas o valor multiplicado)
maximoY = tamanhoY*6; // altura de alcance máximo da imagem (altura 6 vezes maior que a original, na qual pode ser modificada mudando apenas o valor multiplicado)
//as funções abaixo irão redimensionar e estabilizar a imagem, sendo assim, não há necessidades de alterações em suas características.
load_img = false;
function redimensiona(arrasta,imag){
if (load_img){
posX = eval("document."+imag+".offsetLeft");
posY = eval("document."+imag+".offsetTop");
tamanho_novoX = arrasta.x;
tamanho_novoY = arrasta.y;
tamanho_novoX = tamanho_novoX - posX;
tamanho_novoY = tamanho_novoY - posY;
if (tamanho_novoX >= maximoX) tamanho_novoX = maximoX;
if (tamanho_novoY >= maximoY) tamanho_novoY = maximoY;
if (tamanho_novoX <= minimoX) tamanho_novoX = minimoX;
if (tamanho_novoY <= minimoY) tamanho_novoY = minimoY;
eval("document."+imag+".width=tamanho_novoX");
eval("document."+imag+".height=tamanho_novoY");
}
}
function original(imag){
if (load_img){
eval("document."+imag+".width=tamanhoX");
eval("document."+imag+".height=tamanhoY");
}
}
</script>
</head>
<body bgcolor="#000000" onload="load_img=true;">
<img src="http://www.freecode.com.br/topo/topo_r3_c20.jpg" name="imagem1" onDrag="redimensiona(event,this.name)" onClick="original(this.name)">
</body>
</html>
OBS: a função Original() serve para voltar a imagem ao tamanho original apenas com um click!
