Foros del Web » Creando para Internet » CSS »

Problemas con clases en una tabla

Estas en el tema de Problemas con clases en una tabla en el foro de CSS en Foros del Web. Buenas! Estoy haciendo una especie de plano en el que tengo varias habitaciones, al pasar el raton por encima la habitacion que esta debajo del ...
  #1 (permalink)  
Antiguo 30/07/2011, 09:24
 
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 6 años, 6 meses
Puntos: 0
Problemas con clases en una tabla

Buenas!

Estoy haciendo una especie de plano en el que tengo varias habitaciones, al pasar el raton por encima la habitacion que esta debajo del puntero cambia de forma, despues pulso en ella y me lleva a otra pagina.

Bien, he conseguido que funcione todo en google chrome, ademas lo he logrado en muy poco tiempo, por lo que me alegré bastante, pero cual es mi sorpresa, que al abrir la pagina con mozzilla y con explorer no funciona.

os dejo la muestra del plano (con chrome va, para que lo veais correctamente):

http://forojsierra.webcindario.com/


Bien, lo que he hecho es una tabla con una imagen del plano de fondo, encima he cologado una imagen transparente del mismo tamaño que he mapeado (etiquetas <map><area></map>), al pasar el cursor por ciertas zonas, cambio la clase de la tabla (CSS) y el fondo cambia de imagen, pero con los otros navegadores no va.

Teneis idea de porque puede ser? os pongo el codigo de ser necesario.

Gracias!
  #2 (permalink)  
Antiguo 30/07/2011, 11:28
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años, 9 meses
Puntos: 3
Respuesta: Problemas con clases en una tabla

Tendrias que rearmarlo, esa es una forma mas simple hago desaparecer el texto del div "LINK" y entonces solo queda la img solo te queda ubicar cada div exactamente donde iria la parte que queres que cambie y listo.


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. <!--
  7. .contenedor {
  8. width:1000;
  9. }
  10.  
  11. .img  {
  12. background-image:url(/images/bn2.jpg);
  13. width:1000px;
  14. height:1000px;
  15. }
  16.  
  17. .a1 a
  18. {
  19.    margin-top:1; para acomodar
  20.     margin-left:1; para acomodar
  21.     margin-right:1; para acomodar
  22.     margin-bottom:1; para acomodar
  23. * * background-image:url(images/web1.png);
  24. * * background-repeat:no-repeat;
  25. * * width:426px;
  26. * * height:34px;
  27. * * text-decoration:none;
  28. * * display:block;
  29. * * text-indent:-9000px; ACA EL TRUCO
  30. * * padding:0 5px 5px;
  31. }
  32. *
  33. .a1 a:hover
  34. {
  35.    margin-top:1; para acomodar
  36.     margin-left:1; para acomodar
  37.     margin-right:1; para acomodar
  38.     margin-bottom:1; para acomodar
  39. * * background-image:url(images/web2.png);
  40. * * background-repeat:no-repeat;
  41. * * width:426px;
  42. * * height:34px;
  43. * * text-decoration:none;
  44. * * display:block;
  45. * * text-indent:-9000px; ACA EL TRUCO
  46. }
  47. -->
  48. </head>
  49.  
  50. <div clas="contenedor">
  51. <div class="img"> </div>
  52. <div class="a1"><a href="mi url">LINK</a></div>
  53. </div>
  54. </body>
  55. </html>

Última edición por infiero; 30/07/2011 a las 11:40
  #3 (permalink)  
Antiguo 30/07/2011, 12:16
 
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con clases en una tabla

Cita:
Iniciado por infiero Ver Mensaje
Tendrias que rearmarlo, esa es una forma mas simple hago desaparecer el texto del div "LINK" y entonces solo queda la img solo te queda ubicar cada div exactamente donde iria la parte que queres que cambie y listo.

No uso ningun div, lo hago de una forma mas facil (a mi entender)

este es el codigo:

Código:
<table id="plano1" bordercolor='red' border='0' background='img/planos/primera.jpg'>
            
            <tr>
                <td colspan='3'>
                    <center>
                    <img src='img/planos/primera.png' width='940' height='465' usemap="cuadro" onclick='escribir()'>
                    
                    <MAP NAME="cuadro">
                        <AREA SHAPE=POLY; COORDS="330,321,330,450,596,449,595,322,330,321" 
                              HREF="#"  ALT="101"
                              onmouseover="document.getElementById('plano1').className='uno';"
                              onmouseout="document.getElementById('plano1').className='inicio';">
                        
                        <AREA SHAPE=POLY; COORDS="326,452,5,451,4,324,272,323,270,363,327,365,326,452" 
                              HREF="#"  ALT="102"
                              onmouseover="document.getElementById('plano1').className='dos';"
                              onmouseout="document.getElementById('plano1').className='inicio';">
                        
                        
                    </MAP>
                    
                    
                    </center>
                </td>
            </tr>
                        
        </table>
    </center>
Pongo solo dos secciones de la imagen, pero son todas iguales.

Este es el CSS:

table.uno
{
background: url(img/planos/primera101.jpg)
}
table.dos
{
background: url(img/planos/primera102.jpg)
}
table.tres
{
background: url(img/planos/primera103.jpg)
}


Creo que es muy facil de entender, pero no se porque falla en los otros navegadores :(
  #4 (permalink)  
Antiguo 30/07/2011, 19:51
Avatar de infiero  
Fecha de Ingreso: marzo-2006
Mensajes: 38
Antigüedad: 11 años, 9 meses
Puntos: 3
Respuesta: Problemas con clases en una tabla

yo te di la solucion para que ande en todos los navegadores queda en vos en aplicarla si es que me entendiste, sino te intento explicar mejor
  #5 (permalink)  
Antiguo 31/07/2011, 13:31
 
Fecha de Ingreso: mayo-2011
Mensajes: 21
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Problemas con clases en una tabla

Cita:
Iniciado por infiero Ver Mensaje
yo te di la solucion para que ande en todos los navegadores queda en vos en aplicarla si es que me entendiste, sino te intento explicar mejor
La verdad es que no lo entiendo demasiado bien, soy demasiado novato en CSS.

Gracias por todo.

Etiquetas: chrome, clases, fondo, tabla, tamaño
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 15:47.