Programando al Grano
[imagen, redimensionar, navegador, ancho, redimencionar]
Con este código podrás alterar un imagen para que siempre se vea completamente (a lo ancho) en el navegador y con un click del usuario se ampliara a su tamaño original. Esta hecho para modificar solo un imagen pero no será tan difícil modificar este para varios y su código es el mas simple que puedes usar aunque esta espaciado para ser mas legible.
Este código no cambiara cuanto tiempo tarde el imagen en bajar y el mismo será el tiempo que tarde el imagen original en bajar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Redimensionar Imagen Según Ancho - AEInbetween</title>
<meta name="Autor" content="http://aeinbetween.com/" >
<script>
//=================================================================================
//Redimensionar Imagen
// Este js es para re-dimensionar un imagen al anchura del navegador.
// Cuando el función de re-dimensionar es llamado alternara el dimensión
// original a uno donde su anchura no sobre pase el anchura del navegador
// y vice versa.
//Sitio web: http://AEInbetween.com
//=================================================================================
//variables globales
var anchoOrig, alturaOrig; //ancho original del imagen, altura original del imagen
function RecogerDimensiones()
{
//Recoger los dimensiones iníciales de la imagen.
// Este función debe correrse después de cargar la pagina para recoger el ancho
// y altura original del imagen
anchoOrig = document.getElementById("imagen").width;
alturaOrig = document.getElementById("imagen").height;
CambiarDimension(); //para re-dimensionar el imagen cuando cargue la pagina (contando con que corras
// RecogerDimensiones() en onload)
}
function CambiarDimension()
{
//Recoger los dimensiones actual del navegador
// Como encontrar esto valor varia según el navegador encontraras mas de un modo de hacerlo, marcado
// con el nombre del navegador que usa ese método.
var navAncho = 0; //para guardar el ancho que recogeremos aquí
var navAltura = 0; //para guardar la altura que recogeremos aquí
if (document.all){
navAncho = document.body.clientWidth; //IE
navAltura =document.body.clientHeight;
}
else{
navAncho = window.innerWidth; //Restante
navAltura = window.innerHeight;
}
//Cambiar la dimensión de la imagen
var imgAncho = document.getElementById("imagen").width; //recoge ancho actual del imagen
//RecogerAnchoNavegador(); //buscar el ancho y altura del navegador
if (navAncho <= imgAncho)
{
//si es mas grande o igual que el navegador, acomodarlo
// al multiplicar el ancho del navegador por 1.00 (lo cual es equivalente a 100%) el navegador acomoda
// el imagen dentro del ancho del navegador, manteniendo sus proporciones.
document.getElementById("imagen").width=(navAncho * 1.00)-40; //-40 es para acomodar el barra de desplazamiento y márgenes defecto que no es calculado en
//client... y inner... (varia el tamaño y este es para contar con cualquier navegador).
cambioAncho = anchoOrig-((navAncho * 1.00)); //calcular cual es el cambio entre el ancho actual y el original
document.getElementById("imagen").height=alturaOrig-cambioAncho; //le aplicamos el mismo cambio al altura para que el imagen no se vea distorsionado
}
else if (anchoOrig != imgAncho)
{
//Si no es mas grande que el navegador y si no es igual al tamaño original
// cambia el imagen para su dimensión original
document.getElementById("imagen").width = anchoOrig
document.getElementById("imagen").height = alturaOrig
}
}
</script>
</head>
<body onload="RecogerDimensiones();"> <!--Para recoger las medidas originales-->
<!--Solo Coloca el función CambiarDimension() en un evento onclick para cambiar
de modificado a original-->
<a href="#" onclick="CambiarDimension();"><img id="imagen" src="tuImagen.jpg"></a>
</body>
</html>
0 comments:
Post a Comment