Foros del Web » Programando para Internet » Javascript »

Agragar y achicar varios divs

Estas en el tema de Agragar y achicar varios divs en el foro de Javascript en Foros del Web. Hola amigos de Foros del Web Me estoy metiendo en el mundo de Javascript, y estaba realizando un pequeño script para practicar, pero se me ...
  #1 (permalink)  
Antiguo 01/08/2013, 18:43
 
Fecha de Ingreso: agosto-2013
Ubicación: Buenos Aires
Mensajes: 2
Antigüedad: 6 años, 3 meses
Puntos: 0
Pregunta Agragar y achicar varios divs

Hola amigos de Foros del Web

Me estoy metiendo en el mundo de Javascript, y estaba realizando un pequeño script para practicar, pero se me complico y no se como continuar.

En principio lo que quiero lograr es, tener varios DIVS en una pagina, y al pasar el mouse sobre uno se agrande y se achique al quitar el puntero sobre el. Esto lo logro con un solo Div, el problema me surge cuando tengo mas de un div, pase el puntero por donde pase, siempre se agranda y se achica el primero.

Les dejo el codigo

Código HTML:
<html>
       <title>agrandar y achicar divs</title>
	<head>
		<style type="text/css">
				#caja{
				height: 50px;
				width: 100px;
				border: 2px solid black;
				}
		</style>		
				<script language="javascript">
						var tamanomin = 50
						var tamanomax = 100
						
						function agrandar(){
							if(tamanomin == 100){
								tamanomin=50;
								agrandar();
							}
							else{
								tamanomin++;
							    document.getElementById("caja").style.height=tamanomin+'px';
								if(tamanomin<100){
											setTimeout("agrandar();",10);
								}
							}
						}
						function achicar(){
							if(tamanomax == 50){
								tamanomax=100;
								achicar();
							}
							else{
								tamanomax--;
								document.getElementById("caja").style.height=tamanomax+'px';
								if(tamanomax>50){
											setTimeout("achicar();",10);
								}
							}	
						}
				</script>
	</head>
	<body>  
		<div id='caja' onMouseOver=agrandar(); onMouseOut=achicar();></div>
                <div id='caja' onMouseOver=agrandar(); onMouseOut=achicar();></div>
	</body>
</html> 
Eh estado leyendo temas por aqui en el foro, y segun eso lo mejor seria usar el metodo getElementsByTagName, y que los varios divs no sean ids sino clases.
Pero nose aplicar este metodo.

Gracias desde ya!
Saludos
  #2 (permalink)  
Antiguo 01/08/2013, 21:14
 
Fecha de Ingreso: febrero-2004
Ubicación: Guatemala
Mensajes: 117
Antigüedad: 15 años, 9 meses
Puntos: 2
Respuesta: Agragar y achicar varios divs

El id es un identificador unico, por lo que solo debe asignarse a un elemento.
__________________
Saludos cordiales
Juan Luis Herrera
IT Guatemala CA
  #3 (permalink)  
Antiguo 02/08/2013, 14:00
Avatar de andinog  
Fecha de Ingreso: febrero-2012
Mensajes: 50
Antigüedad: 7 años, 9 meses
Puntos: 6
Respuesta: Agragar y achicar varios divs

Proba con

Código HTML:
Ver original
  1. <div class='caja' ...

éste si se puede repetir, a diferencia de ID que es único.

y reemplaza en el javascript

Código Javascript:
Ver original
  1. document.getElementById("caja")
  2.  
  3. // por
  4.  
  5. document.getElementByClassName("caja")

Saludos!
__________________
"El que nada duda nada sabe"
Ser Programador

Etiquetas: divs, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:51.