image
Inicio » Foros » JavaScript

JavaScript

Zoom imagen en el mismo lugar

Volver al foro | Responder | Añadir nuevo tema


De: adriano
Fecha: 18/09/2005
Mensaje:

Hola a todos

Quisiera saber si  es posible, mediante un javascript, que al apoyar  o presionar sobre una imagen que hace "de boton" (ej: un signo +), se amplie una imagen en el mismo lugar que se encuentra (en una tabla)

Gracias

 

 




Quizás le interese
De: Enrique Alejandro Ogalde
Util para: 47 personas

Fecha: 18/09/2005
Mensaje:

HEAD

<script language="JavaScript" type="text/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();
}
MM_reloadPage(true);

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;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>


BODY

<div id="Layer1" style="position:absolute; left:22px; top:64px; width:273px; height:76px; z-index:1; visibility: hidden;"><img src="file:///D|/DATOS/SITIOS/z/imagen/arr/1.jpg" width="300" height="76"></div>
<a href="javascript:;" onClick="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="file:///D|/DATOS/SITIOS/z/imagen/arr/1.jpg" width="70" height="28" border="0"></a>



De: ZeroKilled
Util para: 3 personas

Fecha: 20/09/2005
Mensaje:

Supongo que usaras el efecto de zoom in/out en una sola imagen, por tanto asi seria mi solucion:

- HTML

<div id='zoom'><img src='01.jpg' width='100%' name='currentImg' /></div>
<a href='javascript:sizer("*");'>+</a> &nbsp; <a href='javascript:sizer("/");'>-</a>

- CSS

#zoom{
width:400px;
height:400px;
overflow:auto;
text-align:center;}

- JavaScript

function sizer(opt){
var obj = document.currentImg;
obj.width = eval(obj.width + opt + 1.5);
}

Los pedazos de códigos marcados en rojo son los datos que puedes personalizar a tu gusto. Funciona de la siguiente manera:

  • hay que definir un espacio delimitado para la imagen pero no trabajando directamente sobre la imagen, en este ejemplo sería el DIV con dimensiones de 400 pixeles para ancho y alto. Las dimensiones las puedes ajustar para determinar cuanto es el espacio visual que tendrá la imagen pero no debe de ser valores relativos como lo es el porcentaje (%).
  • la imagen que esta dentro del DIV debe de tener definido el ancho o el alto en terminos de porcentaje, no puede ser ambas dimensiones al mismo tiempo porque de lo contrario es bien probable que la imagen se desfigure y pierde la verdadera persepción. En este ejemplo, defini el ancho a 100 porciento (%) para que ocupe el ancho completo del DIV.
  • la real clave para lograr el efecto de zoom in/out está en el CSS; en necesario definir el DIV con la sentencia overflow:auto. Lo que esto realiza es que cuando el contenido que está dentro de un elemento sobresale de las dimensiones que tiene la etiqueta padre, esta crea unos scrollbars dando la posibilidad de navegar el resto del contenido no visual.
  • no es necesario utilizar DIV, se puede usar otras etiquetas como SPAN.
  • las áreas marcadas en verdes indican la dimensión que esta manejando para lograr el efecto de zoom; puedes reemplazarlo por height según tu gusto.
  • el número que compone esta linea (1.5): obj.width = eval(obj.width + opt + 1.5); corresponde a un factor que maneja la cantidad de zoom a efectuar. Mientras mas alto es el factor, más fuerte es el zoom y viceversa. Pero ten cuidado al usar valores decimales con cero (ejemplo 0.9) porque de lo contrario realiza la función a la inversa; en lugar de zoom in hace zoom out.




De: TOSKA
Util para: 0 personas

Fecha: 23/09/2005
Mensaje:

Yo lo he hecho y funciona, pero las animaciones que tengo en la página se detienen. Alguien sabría decirme porqué?.




De: ZeroKilled
Util para: 1 personas

Fecha: 23/09/2005
Mensaje:

Me atreveria a decir que estas utilizando Internet Explorer. Pues recientemente verifique si en Mozilla actuaba igual y no sucedio nada mal. Se cuando es que se comporta de la forma en que usted describio pero no se por que es. Sucede cuando se presiona un enlace que por lo general contiene codigo JavaScript. Sucede igual si escribes codigos JS en la barra de direccion. Y como siempre, los productos de Microsoft siempre tienen tantos bugs y porquerias.



De: Enrique Alejandro Ogalde
Util para: 2 personas

Fecha: 24/09/2005
Mensaje:

Es cierto lo que comenta Zero killed respecto a las "fallas" de Internet Explorer al aparecer código Java Script en nuestras páginas.

Sin embargo no se olviden que MUCHAS COSAS QUE EN INTERNET EXPLORER FUNCIONAN el Mozilla ni siquiera se entera que existen. Tampoco me agrada Micro$oft, igual que a todos; pero despreciarlo por completo es absurdo, ya que somos pocos aún los que usamos navegadores alternativos.

Si usan flash o swish tb verán que no es posible poner "el fondo transparente"; y como esas, muchas más cosillas. En mi caso tuve (y tengo) un problema con un random para un banner, que funciona solo en IE, y no anda en mozilla, ni Opera, ni Netscape.

Asi que a ser prudentes a la hora de elegir hacer algo solo para un navegador. La idea será tomar lo mejor de cada  uno considerando pros y contras.

Saludos desde Trelew - Patagonia Argentina.-

Cordialmente Enrique





De: Victor
Util para: 0 personas

Fecha: 26/09/2005
Mensaje:

<H3>Pasa el mouse para ampliar<BR>
y quitalo para reducir</H3>

<IMG SRC="imatges/tisora.gif" WIDTH="20" HEIGHT="20" NAME="myImage" onmouseover="javascript:myImage.height=49;myImage.width=49" onmouseout="javascript:myImage.width=20;myImage.height=20">





De: Maria Jose
Util para: 0 personas

Fecha: 08/11/2005
Mensaje:

Necesito ayuda!
Estoy intentando hacer un zoom de una imagen que esta compuesta a su vez por cuatro, y no se como hacerlo, he buscado, pero sólo he encontrado como hacer el zoom de una imagen sólo.
Gracias.



De: henry
Util para: 0 personas

Fecha: 23/05/2007
Mensaje:

hola amigos tengo el siguiente problemas quiero colocar dos imagenes una sobre otra y que cuando mueva el mouse sobre un texto xxxx desaparezca una y quede activa la de abajo como puedo hacer Adjunto el codigo que tengo hasta ahora .vis1 { visibility:visible } .vis2 { visibility:hidden }

pasa el mouse por aqui y desa parecera la imagen :p .





Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:05 de Agosto de 2012. Spain - España.
© 1998-2004 por . Todos los derechos reservados.