Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje20-01-2009, 18:20 (UTC)    
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
Mensaje20-01-2009, 19:03 (UTC)    
Título del mensaje:

gracias por el codigo pero si no me equipoco es el mismo nos que este es mas corto.

http://www.paginawebgratis.es/forum/viewtopic.php?t=2599
Mensaje20-01-2009, 19:55 (UTC)    
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
Mensaje20-01-2009, 21:33 (UTC)    
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
Mensaje20-01-2009, 22:37 (UTC)    
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
Mensaje21-01-2009, 01:58 (UTC)    
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.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group