Agragar y achicar varios divs

Ma7ias1991 · #1 (**permalink**) 01/08/2013, 17:43

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

jluishg · #2 (**permalink**) 01/08/2013, 20:14

El id es un identificador unico, por lo que solo debe asignarse a un elemento.

andinog · #3 (**permalink**) 02/08/2013, 13:00

Proba con

Código HTML:

Ver original<div class='caja' ...

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

y reemplaza en el javascript

Código Javascript:

Ver originaldocument.getElementById("caja")
 
// por
 
document.getElementByClassName("caja")

Saludos!