¿Cómo hacer para que al seleccionar una imagen de mi web se visualice a mayor tamaño?
Por favor, necesito saber como puedo hacer para una de mis imágenes de mi web, al pinchar en ella, se visiualize a mayor tamaño.
Gracias
Gracias
1 Respuesta
Respuesta de blackprince
1
Este javascript te ayudara, pero sin embargo, te recomiendo lo estudies y lo adecues a lo que necesitas.. ehhh
<!-- TTRES PASOS PARA QUE AUMENTES EL TAMAÑO:
1. Copia el codigo dentro del HEAD de tu HTML
2. Agrega el evento onLoad en el BODY
3. Pon el ultimo codigo dentro del BODY -->
<!-- PASO UNO: Pega este codigo dentro del HEAD -->
<HEAD>
<style>
.divstyle{position:absolute; width="0";height:"0"}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
{alert("No se encontro la imagen!");}
else
{if (index == -3){alert("Tipo de Imagen desconocido");
form.width.value=0;
form.height.value=0;}
else
{
var img_obj = new Image();
img_obj = form.image_file.value;
document.changing.src = img_obj;
document.changing2.src= img_obj;
document.changing.width = document.changing2.width;
document.changing.height = document.changing2.height;
set();
}
}
}
fast = 0;
change = 0;
function upw(){
document.image.width.value=parseInt(document.image.width.value)+1;
resize();}
function over_upw(){upw();
change = 1;
changetime = setTimeout("fast_upw()","600");}
function fast_upw(){clearTimeout(changetime);
upw();
fast = setTimeout("fast_upw()","100");}
function clt(){
if (change == 1){clearTimeout(changetime);}
clearTimeout(fast);
change = 0;
}
function resize() {document.changing.height = document.image.height.value;
document.changing.width = document.image.width.value;}
function downw(){document.image.width.value=parseInt(document.image.width.value)-1;
resize();}
function over_downw(){downw();
change = 1;
changetime = setTimeout("fast_downw()","600");}
function fast_downw(){clearTimeout(changetime);
downw();
fast = setTimeout("fast_downw()","100");}
function uph(){document.image.height.value=parseInt(document.image.height.value)+1;
resize();}
function over_downh(){downh();
change = 1;
changetime = setTimeout("fast_downh()","600");}
function fast_downh(){clearTimeout(changetime);
downh();
fast = setTimeout("fast_downh()","100");}
function over_uph(){uph();
change = 1;
changetime = setTimeout("fast_uph()","600");}
function fast_uph(){clearTimeout(changetime);
uph();
fast = setTimeout("fast_uph()","100");}
function downh(){document.image.height.value=parseInt(document.image.height.value)-1;
resize();}
function set(){
document.image.width.value=document.changing.width;
document.image.height.value=document.changing.height;}
// End -->
</script>
</HEAD>
<!-- PASO DOS: Inserta el evento onLoad dentro del BODY -->
<BODY onLoad="set()">
<!-- Paso tres: Copia este codigo dentro del BODY de tu HTML -->
<center>
<form name="image">
<input type="file" name="image_file"><br><br>
<input type="button" name="show" value="mostrar imagen" onclick="showimg(this.form)">
<br><br>
Width Heigth
<br><img src="/img/image-resizer/up.gif" onmousedown="over_upw()" onmouseup="clt()">
<img src="/img/image-resizer/down.gif" onmousedown="over_downw()" onmouseup="clt()">
<input type="text" name="width" size="4" readonly>
<input type="text" name="height" size="4" readonly>
<img src="/img/image-resizer/up.gif" onmousedown="over_uph()" onmouseup="clt()" >
<img src="/img/image-resizer/down.gif" onmousedown="over_downh()" onmouseup="clt()">
<br><br>
<table border ="2">
<tr><td>
<img src="/img/image-resizer/1.gif" name="changing">
</td></tr></table>
</form>
<div STYLE="left:-5000 px;top:0" class="divstyle">
<P ><img src="/img/image-resizer/1.gif" name="changing2"></p>
</div>
</center>
<!-- Script Size: 4.09 KB -->
Espero haberte ayudado.. cualquier duda estoy por aqui
<!-- TTRES PASOS PARA QUE AUMENTES EL TAMAÑO:
1. Copia el codigo dentro del HEAD de tu HTML
2. Agrega el evento onLoad en el BODY
3. Pon el ultimo codigo dentro del BODY -->
<!-- PASO UNO: Pega este codigo dentro del HEAD -->
<HEAD>
<style>
.divstyle{position:absolute; width="0";height:"0"}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
{alert("No se encontro la imagen!");}
else
{if (index == -3){alert("Tipo de Imagen desconocido");
form.width.value=0;
form.height.value=0;}
else
{
var img_obj = new Image();
img_obj = form.image_file.value;
document.changing.src = img_obj;
document.changing2.src= img_obj;
document.changing.width = document.changing2.width;
document.changing.height = document.changing2.height;
set();
}
}
}
fast = 0;
change = 0;
function upw(){
document.image.width.value=parseInt(document.image.width.value)+1;
resize();}
function over_upw(){upw();
change = 1;
changetime = setTimeout("fast_upw()","600");}
function fast_upw(){clearTimeout(changetime);
upw();
fast = setTimeout("fast_upw()","100");}
function clt(){
if (change == 1){clearTimeout(changetime);}
clearTimeout(fast);
change = 0;
}
function resize() {document.changing.height = document.image.height.value;
document.changing.width = document.image.width.value;}
function downw(){document.image.width.value=parseInt(document.image.width.value)-1;
resize();}
function over_downw(){downw();
change = 1;
changetime = setTimeout("fast_downw()","600");}
function fast_downw(){clearTimeout(changetime);
downw();
fast = setTimeout("fast_downw()","100");}
function uph(){document.image.height.value=parseInt(document.image.height.value)+1;
resize();}
function over_downh(){downh();
change = 1;
changetime = setTimeout("fast_downh()","600");}
function fast_downh(){clearTimeout(changetime);
downh();
fast = setTimeout("fast_downh()","100");}
function over_uph(){uph();
change = 1;
changetime = setTimeout("fast_uph()","600");}
function fast_uph(){clearTimeout(changetime);
uph();
fast = setTimeout("fast_uph()","100");}
function downh(){document.image.height.value=parseInt(document.image.height.value)-1;
resize();}
function set(){
document.image.width.value=document.changing.width;
document.image.height.value=document.changing.height;}
// End -->
</script>
</HEAD>
<!-- PASO DOS: Inserta el evento onLoad dentro del BODY -->
<BODY onLoad="set()">
<!-- Paso tres: Copia este codigo dentro del BODY de tu HTML -->
<center>
<form name="image">
<input type="file" name="image_file"><br><br>
<input type="button" name="show" value="mostrar imagen" onclick="showimg(this.form)">
<br><br>
Width Heigth
<br><img src="/img/image-resizer/up.gif" onmousedown="over_upw()" onmouseup="clt()">
<img src="/img/image-resizer/down.gif" onmousedown="over_downw()" onmouseup="clt()">
<input type="text" name="width" size="4" readonly>
<input type="text" name="height" size="4" readonly>
<img src="/img/image-resizer/up.gif" onmousedown="over_uph()" onmouseup="clt()" >
<img src="/img/image-resizer/down.gif" onmousedown="over_downh()" onmouseup="clt()">
<br><br>
<table border ="2">
<tr><td>
<img src="/img/image-resizer/1.gif" name="changing">
</td></tr></table>
</form>
<div STYLE="left:-5000 px;top:0" class="divstyle">
<P ><img src="/img/image-resizer/1.gif" name="changing2"></p>
</div>
</center>
<!-- Script Size: 4.09 KB -->
Espero haberte ayudado.. cualquier duda estoy por aqui
