de html a css

[cristian_cena]

No se si te entiendo bien.

El truco es:
- padre e imagen relativos
- mapa de imagen absoluto
- coordenadas de los hijos absolutos dadas con top/left/right/bottom

Sobre dar click: usa #capa:hover{cursor:pointer;} y simplifica el codigo del ejemplo. eliminando seguramente el <ul><li></li> ... </ul> y creando un <div> al que lo posicionas en absoluto.

Si puedes usar javascript prueba con esto:

Código HTML:

<div id="padre">
<img id="imagen" src="http://www.forosdelweb.com/f53/html-css-915895-post3868292/f53/html-css-915895-post3868292/f53/html-css-915895/..." alt="..." />
<a href="#" id="mapa"> ... </a>
</div>
 

Código CSS:

#padre, #imagen{position:relative;}
#mapa{display:none; position:absolute; text-decoration:none;}
#mapa:hover{cursor:pointer;}
img{z-index:1;}
#mapa{z-index:2; top: ... ; left: ... ;} /*las coordenadas estan dadas por top y left*/
 

Código Javascript:

/*esta escrito en jquery tu eliges si usas js puro u otra librería.*/
$("#imagen").hover(
function(){
$("#mapa").fadeIn(0); /*fadeIn() da un display:block;*/
}, 
function(){
$("#mapa").fadeOut(0); /*fadeOut() da un display:none;*/
}
);
 

Si facebook no te permite usar javascript usa el truco css que te presentan en el ejemplo:

Código CSS:

#padre:hover #mapa{display:block;}
 

:hover no funciona en ie6, pero puedes hacerlo funcionar con una librería llamada ie7-js Lo cual no tiene mucho sentido usar ya que si puedes usar javascript das el hover desde javascript.

No lo probé pero debería funcionar. Repito no se como es el tema con facebook y que es lo que permite hacer y que no.

Saludos.