Problema con eventos de raton en varios div

[acomom22]

Tengo 3 div distintos pero colocados en la misma posicion y con el mismo tamaño. Cada uno contiene un gráfico SVG y lo que quiero es cambiar entre ellos segun se pase el raton o se haga click. Mi codigo es el siguiente

Código:

<div id="inicial" class="grafico" onmouseover="mostrar('tiro');ocultar('inicial');">

<object type="image/svg+xml" data="svg1.svg" />

</div>

<div id="tiro" class="grafico" onclick="mostrar('gol');ocultar('tiro');">

<object type="image/svg+xml" data="svg3.svg" />

</div>


<div id="gol" class="grafico">

<object type="image/svg+xml" data="svg2.svg" />

</div>

En Mozilla funciona bien el mouseover, pero no el click. Y en Opera el mouseover solo oculta un div pero no me muestra el siguiente.

Las funciones en javascript que tengo son estas

Código:

 <script type="text/javascript">
   <!--
 function mostrar(imagen){
	obj=document.getElementById(imagen);
	obj.style.visibility= "visible";
 }
 
  function ocultar(imagen){
	obj=document.getElementById(imagen);
	obj.style.visibility= "hidden";
 }
 //-->
 </script>

El codigo pasa el validor de xhtml. Agradeceria vuestra ayuda porque yo no se que mas probar. Gracias

[mhax]

pureba con:

Código Javascript:

obj.style.display="none";