Foros del Web » Programando para Internet » Javascript »

Ayuda por favor

Estas en el tema de Ayuda por favor en el foro de Javascript en Foros del Web. Hola: Estoy realizando una página para un portal de una universidad y en esta página realizo una consulta a una base de datos (mysql) donde ...
  #1 (permalink)  
Antiguo 26/10/2004, 10:34
 
Fecha de Ingreso: octubre-2004
Ubicación: Manizales (Colombia)
Mensajes: 3
Antigüedad: 19 años, 6 meses
Puntos: 0
Pregunta Ayuda por favor

Hola:
Estoy realizando una página para un portal de una universidad y en esta página realizo una consulta a una base de datos (mysql) donde se muestra una lista de facultades y una lista de programas.

Lo que necesito es que al momento de pasar el mouse por alguna de las facultades se active con un color específico los programas asociados a esa facultad. Un ejemplo clave se encuentra en la la página de MIT http://www.mit.edu/education/. He tratado de hacerlo de muchas formas y me ha sido dificil porque la información se encuentra almacenda en la base de datos.

Si alguien tiene conocimiento de como hacerlo se lo agradecería mucho.

Atte: Satya
  #2 (permalink)  
Antiguo 26/10/2004, 15:28
Avatar de claray  
Fecha de Ingreso: agosto-2004
Ubicación: ahora... en Caracas
Mensajes: 345
Antigüedad: 19 años, 8 meses
Puntos: 0
un ejemplo?

Hola satya, bienvenida a los foros.

Si te fijas en el codigo de esa pagina el tema se resuelve en base a codigo JavaScript. Cada uno de los elementos (facultades y programas) deberá tener un "ID" unico. Imagino, que como lo tienes en base d edatos tienes la relacion de cuales programas pertenecen a que escuela, por ende no es dificil hacer una lista de los programas que se deben destacar cuando pasa el mouse sobre una facultada, cierto?

Bueno, el punto es que en las facultades deberas manejar los eventos onMouseOver y onMouseOut para marcar y desmarcar los programas asociados.


Te adjunto un ejemplo que hace lo que deseas, claro, asumo que sabes crear desde PHP los arreglos (facultades y programas) para que queden definidos en JavaScript. (de todas formas es sumamente sencillo, crea, pr ejemplo un string en donde vas armando el texto y luego solo lo agregas en donde corresponde)

Como veras en este código he creado un arreglo de facultades en donde cada elemento es el codigo de la facultad, por ende debe ser unico.

El segundo arreglo, es un arreglo de arreglos, en donde cada elemento corresponde a una facultad y es un arreglo de todos los programas de la facultad ( el prmer elemento de programas es un arreglo con todos los programas de la primera facultad, etc.)

Si te fijas, en cada link (facultad o programa) en el HTML se ha indicado como ID el codigo que corresponde y que esta en los arreglos, de esa manera, la funcion doResaltar puede localizar aquellos elementos que debe destacar.


Se entendio algo? espero que si... bueno de todas maneras ahi te va...

<html>

<head>
<meta name="author" content="CAraya">
<style type="text/css">
a { color: #0000FF;
text-decoration: none;}
</style>
<script type="text/javascript">
var facultades = new Array("01","02","03");
var programas = new Array(new Array("p1","p2","p3","p4"),new Array("p5","p6"),new Array("p7"));

var colorDestaca = "#FF0000";
var colorNormal = "#0000FF";

function doResaltar(id,resaltar){
if (resaltar){
cResaltado = colorDestaca;}
else{ cResaltado = colorNormal;}
document.getElementById(id).style.color = cResaltado;
for (var i=0; i<facultades.length;i++){
if (facultades[i]==id) {
for (var j= 0;j<programas[i].length;j++){
document.getElementById(programas[i][j]).style.color = cResaltado;
}
break;
}
}

}
</script>
</head>
<body>

<a href="#" id="01" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Ingenieria</a><br>
<a href="#" id="02" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Derecho</a><br>
<a href="#" id="03" onMouseover="doResaltar(this.id,true);" onmouseout="doResaltar(this.id,false);">Facultad de Medicina</a><br>
<br>
<a href="#" id="p1" >Programa ingenieria 1</a><br>
<a href="#" id="p2" >Programa ingenieria 2</a><br>
<a href="#" id="p3" >Programa ingenieria 3</a><br>
<a href="#" id="p4" >Programa ingenieria 4</a><br>
<a href="#" id="p5" >Programa Derecho 1</a><br>
<a href="#" id="p6" >Programa Derecho 2</a><br>
<a href="#" id="p7" >Programa medicina 1</a><br>
</body>
</html>



eso, espero que te sirva como guía.

Saludos.
__________________
:pirata: El arte de desarrollar es dejar que los otros lo hagan
  #3 (permalink)  
Antiguo 29/10/2004, 10:16
 
Fecha de Ingreso: octubre-2004
Ubicación: Manizales (Colombia)
Mensajes: 3
Antigüedad: 19 años, 6 meses
Puntos: 0
Hola Claray
Muchísimas gracias por tu ayuda, era justo lo que necesitaba. He tratado de hacerlo de muchas formas pero no se me ocurrio hacerlo con arreglos.

Si tengo algún problema, te pido de nuevo tu colaboración.

Saludo.
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




La zona horaria es GMT -6. Ahora son las 13:39.