Autor
Mensaje
solamente-sencillo
Semi-Experto
20-01-2009, 18:20 Título del mensaje : Achicar Imagen y Agrandarla
a) Inserta este código dentro de las etiquetas <head> y </head>
Código: <script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
var img_path="imagen_aquí.gif";
var top_pos=100;
var left_pos=400;
var max_width=1200;
var min_width=60;
var time_length=1;
var step=1;
document.write('<div style="position:absolute; top:'+top_pos +'; left:'+left_pos+'"><img src="'+img_path +'" border="0" name="z"></div>');
img_act_height=z.height;
img_act_width=z.width;
var original_time=time_length;
function zoom_out()
{ if(z.width==0)
{ z.border=0;
}
if(z.width!=0)
{ if(z.width>min_width)
{ z.width-=step;
z.height=Math.round(z.width*( (img_act_height)/(img_act_width) ) );
setTimeout("zoom_out()",time_length); }
else
{ window.alert('Minimo ZooM.'); }
}
}
function zoom_in()
{ if(z.width==0)
{ z.border=0;
}
if(z.width!=0)
{ if(z.width<max_width) { z.width+=step;
z.height=Math.round(z.width*( (img_act_height)/(img_act_width) ) );
setTimeout("zoom_in()",time_length); }
else { window.alert('MAXIMO ZOOM.'); }
}
}
function resume_zoom(){ time_length=original_time;
}
function pause_zoom(){ time_length=10000000000;}
function set_original()
{ z.height=img_act_height; z.width=img_act_width;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Partes modificables de este código:
En esta línea puedes modificar la imagen:
var img_path="imagen_aquí.gif";
En esta la situación Vertical:
var top_pos=100;
En esta la situación horizontal:
var left_pos=400;
En esta el tamaño que aumentará:
var max_width=1200;
En esta el tamaño que disminuirá:
var min_width=60;
Esta no lo se:
var time_length=1;
En esta la velocidad:
var step=1;
b) Inserta este código dentro de las etiquetas <body> y </body>
Código: <div align="center">
<center>
<table width="203" height="32" border="0" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr align="center">
<td width="183" height="1" colspan="2"><a onMouseOver=javascript:resume_zoom();set_original(); onMouseOut=javascript:pause_zoom(); href="#ab"><span class="sub1">
<font size="2" face="Verdana">Tamaño Original</font></span></a></td>
</tr>
<tr align="center">
<td width="101" height="1"></embed><a onMouseOver=javascript:resume_zoom();zoom_in(); onMouseOut=javascript:pause_zoom(); href="#ab"><span class="sub1">
<font size="2" face="Verdana">+ Aumentar</font></span></a></td>
<td width="102" height="1"><a onMouseOver=javascript:resume_zoom();zoom_out(); onMouseOut=javascript:pause_zoom(); href="#ab"><span class="sub1">
<font size="2" face="Verdana">- Disminuir</font></span></a></td>
</tr>
</table>
</center>
</div>
Partes modificables de este código:
En esta línea puedes modificar el texto de las acciones:
<font size="2" face="Verdana">Tamaño Original </font></span></a></td>
<font size="2" face="Verdana">+ Aumentar </font></span></a></td>
<font size="2" face="Verdana">-Disminuir </font></span></a></td> ______________ Miguel García | Desarrollador web freelance
↑
seba37
Semi-Experto
Ubicación: Rosario Santa fe Argentina
↑
solamente-sencillo
Semi-Experto
20-01-2009, 19:55 Título del mensaje : NO
No por q en esta imagen la haces grande y la pudes hacer otra vez pequeña
______________
Miguel García | Desarrollador web freelance
↑
nixoweb
Ex-teamPwG-Mod
20-01-2009, 21:33 Título del mensaje :
Puff, esta muchísimo mejor seba , no lo has probado a este? te vas a impresionar, es buenísimo.
Gracias por el aporte solamente-sencillo , no tenía una imagen a mano, lo probé con tu avatar Se agradece. Ultima edición por nixoweb el Mar Ene 20, 2009 5:34 pm; editado 1 vez
↑
solamente-sencillo
Semi-Experto
20-01-2009, 22:37 Título del mensaje :
nixoweb escribió: Puff, esta muchísimo mejor seba , no lo has probado a este? te vas a impresionar, es buenísimo.
Gracias por el aporte solamente-sencillo , no tenía una imagen a mano, lo probé con tu avatar Se agradece.
Y te deberia de agragecer ya que tu eres uno de los que mas me ayuda gracias Nixo ______________ Miguel García | Desarrollador web freelance
↑
nixoweb
Ex-teamPwG-Mod
21-01-2009, 01:58 Título del mensaje :
Al decir "se agradece " me refiero a que esto se merece que te agradezcamos. asi que gracias y lo otro no tiene nada que ver, son temas apartes. al lado de ese código soy muy nuevo.
↑