JavaScript - Eventos onmouseover y onmouseout en varios divs

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 525

Val: 4

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 clara

No me gusta: Está respuesta no esta clara o no es útil

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

Comentar

Pos: 525

Val: 4

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

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

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

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

Comentar

Pos: 525

Val: 4

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

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

Comentar

Cómo se hace?

Menu en Javascript