Problemas con clases en una tabla

SierraRM · #1 (**permalink**) 30/07/2011, 08:24

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!

infiero · #2 (**permalink**) 30/07/2011, 10:28

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<!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>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
.contenedor {
width:1000;
}
 
.img  {
background-image:url(/images/bn2.jpg);
width:1000px;
height:1000px;
}
 
.a1 a
{
    margin-top:1; para acomodar
    margin-left:1; para acomodar
    margin-right:1; para acomodar
    margin-bottom:1; para acomodar
* * background-image:url(images/web1.png);
* * background-repeat:no-repeat;
* * width:426px;
* * height:34px;
* * text-decoration:none;
* * display:block;
* * text-indent:-9000px; ACA EL TRUCO
* * padding:0 5px 5px;
}
*
.a1 a:hover
{
    margin-top:1; para acomodar
    margin-left:1; para acomodar
    margin-right:1; para acomodar
    margin-bottom:1; para acomodar
* * background-image:url(images/web2.png);
* * background-repeat:no-repeat;
* * width:426px;
* * height:34px;
* * text-decoration:none;
* * display:block;
* * text-indent:-9000px; ACA EL TRUCO
}
-->
</style>
</head>
 
<body>
<div clas="contenedor">
<div class="img"> </div>
<div class="a1"><a href="mi url">LINK</a></div>
</div>
</body>
</html>

SierraRM · #3 (**permalink**) 30/07/2011, 11:16

Cita:

Iniciado por infiero

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 :(

infiero · #4 (**permalink**) 30/07/2011, 18:51

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

SierraRM · #5 (**permalink**) 31/07/2011, 12:31

Cita:

Iniciado por infiero

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.