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