Problema al mapear un imagen.

[SierraRM]

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!

PD: aunque hago referencia a CSS pienso que puede ser algun problema con javascript, de no ir aqui decidmelo, por favor.

[SierraRM]

Este es el codigo del mapeo:

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>

Os pongo solo dos, pero son todos 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)
}


A ver si alguien me puede echar un cable.