JavaScript - Eventos onmouseover y onmouseout en varios divs

   
Vista:

Eventos onmouseover y onmouseout en varios divs

Publicado por Marh (1 intervención) el 31/03/2009 16:27:16
Hola.

Soy novato en javascript y pues solicito su ayuda urgente, les explico mi problema.
Tengo un menu lateral, el cual esta maquetado por puros divs y quiero aplicarle a cada div las propiedades onmouseover y onmouseout, este es el codigo que he estado manejando pero solo hace efecto a un solo div(al primero) y al resto no. El codigo es el sgte:

function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function(){
document.getElementById("seccion").onmouseover = resaltar;
document.getElementById("seccion").onmouseout = resaltar;
}

<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
<div id="seccion" class="menu"></div>
.......
.......

He aplicado un for a los document.getElementById... previamente cambiando el id de los divs siendo estos numeros enteros empezando en 0.

Ojala puedan ayudarme ya que esto me tiene parado, tal vez las soluciones que tienen vayan por el mismo camino que ya comente pero no he tenido fortuna en conseguirlo.
Muchas Gracias.
Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Bet70

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Bet70 (63 intervenciones) el 31/03/2009 21:48:53
Solo kieres kambiar de kolor el fondo de los div's.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Marh (1 intervención) el 31/03/2009 22:17:04
Hola, si solo el fondo del div,gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Bet7o

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Bet7o (63 intervenciones) el 31/03/2009 23:08:01
Mira te dejo un ejemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function mouseOver(element){
document.getElementById(element).style.backgroundColor = 'red'
}
function mouseOut(element){
document.getElementById(element).style.backgroundColor = 'blue'
}
</script>
</head>
<body>
<div id="div1" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">div 1</div>
<div id="div2" onmouseover="mouseOver(this.id)" onmouseout="mouseOut(this.id)">div 2</div>
</body>
</html>

Fijate los divs tienen diferente id

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por marh (3 intervenciones) el 01/04/2009 01:21:30
hola bet...

muchas gracias por tu ayuda, pero la idea es que todo este en el script, que el codigo en la etiqueta div este limpio solo con su id y class, <div id="x" class="y"></div> y si claro los id tienen q ser distintos todos, como puse en el primer post, ojala puedas seguir ayudandome, gracias, saludos...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Bet70 (1 intervención) el 01/04/2009 02:52:00
Ok pues mira es muy facil, te dejo el ejemplo y kualkier duda lo komentas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function pDiv(){
var aElement = document.getElementsByTagName('div')
for ( i = 0 ; i < aElement.length; i ++){
aElement[i].onmouseover = function(){ this.style.background='red' }
aElement[i].onmouseout = function(){ this.style.background='blue' }
}
}
</script>
</head>
<body onload="pDiv()">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por marh (3 intervenciones) el 01/04/2009 03:07:42
hola...

Si gracias por tu ayuda, funciona pero tiene un problema, coge todos los divs, no solo los que tienen id="div1" o sucesivamente, sino todos hasta los que no tienen id, tal vez es por el getElementByTagName('div'), bueno no se, tratare de solucionarlo, si tu sabes del pq? por fa ayudame ok, gracias.saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Bet7o

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Bet7o (63 intervenciones) el 01/04/2009 10:21:31
0k entonces solo deberias agregar un filtro donde la condicion sea k el id sea = a lo k kieres.

Te dejo el ejemplo modifikado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function pDiv(){
var aElement = document.getElementsByTagName('div')
for ( i = 0 ; i < aElement.length; i ++){
if (aElement[i].id == '[tu kondicion de filtro]'){
aElement[i].onmouseover = function(){ this.style.background='red' }
aElement[i].onmouseout = function(){ this.style.background='blue' }
}
}
}
</script>
</head>
<body onload="pDiv()">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</body>
</html>

Ya solo pones la kondicion del filtro y si kieres ser mas dinamiko deberias obtener del id del div las 3 primeras letras y komparalas kon las 3 primeras letras de los div k kieres modifikar.

ej.

aElement[i].id.substr(0,3) == 'div'

ya despues obtienes el resto de la kadena y la konviertes a int para validar el rango de div a modifikar.

Espero te sirva.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Eventos onmouseover y onmouseout en varios divs

Publicado por Marh (3 intervenciones) el 01/04/2009 13:59:17
hola bet..

muchas gracias por tu tiempo y ayuda, pero consegui hacerlo con lo que tenia antes, aqui dejo el codigo para alguien que tenga la misma inquietud, saludos.

function resaltar(elEvento)
{
var evento = elEvento || window.event;
switch(evento.type)
{
case 'mouseover':
this.style.backgroundColor = 'black';
break;
case 'mouseout':
this.style.backgroundColor = 'blue';
break;
}
}
window.onload = function()
{

for( var i=1;i<4;i++)
{
document.getElementById("i").onmouseover = resaltar;
document.getElementById("i").onmouseout = resaltar;
}
}

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
......
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar