de html a css

elsolodigno · #1 (**permalink**) 25/05/2011, 15:10

Hola Estimados, tengo el sgte. código:

<div align="center"><img style="border:0" src="img/auto.jpg" alt="auto" width="788" height="388" align="middle" longdesc="automóviles" usemap="#mail"/>
</div>

<map name="mail">
<area shape="rect" coords="284,238,591,284" href="mailto:[email protected]" alt="[email protected]"/>
</map>

Hasta acá todo bien, pero cómo hago para usar el usemap de html con css?. Mi consulta es porque quiero llevar el código a fbml de mi fan page de facebook y con html no me funciona y sé que con css sí podría funcionar... No sé si m e explico.

Gracias a todos por ayudarme...

cristian_cena · #2 (**permalink**) 25/05/2011, 15:30

Hola elsolodigno, en este artículo crean mapas de imágenes separando el marcado de los estilos, a lo mejor pueda servirte.

Aunque veo que no es un map sino que trabajan con un contenedor relativo e hijos absolutos (z-index) y las coordenadas pasan a ser los top/left/bottom/right de las cajas absolutas que ubican por encima de la imagen (cajas que forman las áreas destacadas ).

Nunca trabajé con fbml por eso lamento no poder ayudarte, tampoco se hasta donde facebook te permite introducir javascript, esto porque vas a ver que con js podrias simplificar los :hover que se muestran en el css del artículo.

Espero sirva de algo. Un saludo.

elsolodigno · #3 (**permalink**) 25/05/2011, 15:32

Cita:

Iniciado por elsolodigno

Hola Estimados, tengo el sgte. código:

<div align="center"><img style="border:0" src="img/auto.jpg" alt="auto" width="788" height="388" align="middle" longdesc="automóviles" usemap="#mail"/>
</div>

<map name="mail">
<area shape="rect" coords="284,238,591,284" href="mailto:[email protected]" alt="[email protected]"/>
</map>

Hasta acá todo bien, pero cómo hago para usar el usemap de html con css?. Mi consulta es porque quiero llevar el código a fbml de mi fan page de facebook y con html no me funciona y sé que con css sí podría funcionar... No sé si m e explico.

Gracias a todos por ayudarme...

O sea, que atributos debo usar en css para las coordenadas?:

overflow left top display width height padding-top position ?

Muchas gracias!

cristian_cena · #4 (**permalink**) 25/05/2011, 15:54

Debes usar (si sigues el ejemplo del artículo de librosweb.es) top: ... ; , left: ... ; , bottom: ... ; y/o right: ... ; pues con estos lo que haces es mover las capas con posición absoluta. (en el ejemplo son los <li>)

Nota también en el ejemplo como encierran todo dentro de un contenedor y a este le dan posicion relativa. Luego todo lo que esta adentro tiene posición absoluta. Y con esto declarado usan z-index para apilar las capas.

Saludos.

elsolodigno · #5 (**permalink**) 25/05/2011, 18:24

Cita:

Iniciado por cristian_cena

Debes usar (si sigues el ejemplo del artículo de librosweb.es) top: ... ; , left: ... ; , bottom: ... ; y/o right: ... ; pues con estos lo que haces es mover las capas con posición absoluta. (en el ejemplo son los <li>)

Nota también en el ejemplo como encierran todo dentro de un contenedor y a este le dan posicion relativa. Luego todo lo que esta adentro tiene posición absoluta. Y con esto declarado usan z-index para apilar las capas.

Saludos.

Hola Cristián, priemro gracias por tu ayuda...

Mirá funciona de acuerdo a tu ejemplo, pero no en Internet Explorer, sólo anda bien en Chrome...

Te consulto

no habrá una forma más fácil como por ejemplo poner las coordenadas:

width: 140px; height: 110px; top: 130px; left: 345px;

y al pasar el mouse por esa zona se pueda darle clic pero sin que aparezca el link ni la caja no sé si me entiendo, parecido al area usemal de html que sólo aparace la manito del cursor nada más.

Bueno de todas manerar muchas gracias por tu tiempo, estoy probando!

cristian_cena · #6 (**permalink**) 25/05/2011, 18:49

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:

Ver original<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:

Ver original#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:

Ver original/*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:

Ver original#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.

elsolodigno · #7 (**permalink**) 25/05/2011, 20:42

Hola Cristián, algo anduvo, pero se me complica un poco ya que soy bastante nuevo en css y javascript nulo!.

Te paso una url para que veas lo que me gustaría y también parte de su código (lo copié como venía):

url: www.facebook.com/infobae

código:

onmousedown=\"UntrustedLink.bootstrap($(this), "6d892", event, bagof({}));\" rel=\"nofollow\" style=\"background: transparent none repeat scroll 0\u0025 0\u0025; overflow: hidden; left: 23px; top: 116px; display: block; width: 183px; height: 0pt; padding-top: 91px; position: absolute;\" title=\"\">\u003c\/a>\u003c\/div>\n\t\u003cdiv>\u003ca href=\"http:\/\/www.infobae.com\/economia\"

Se nota que hay una mezcla de javascript y css y una misma línea...

Gracias de nuevo man!.

elsolodigno · #8 (**permalink**) 26/05/2011, 10:10

Hola Cristián de nuevo!, estuve toda la noche probando y así me funcionó pero solo en chrome y no en internet explorer 8:

<style>
.autos_01 {
float: left;
width: 520px;
height: 720px;
background: url("http://www..........com/img/autos.jpg") no-repeat left top;
}
.autos_01 div.details {
float: left;
width: 180px;
padding: 217px 185px;
}
.autos_01 div.details a {
float: left;
width: 80px;
height: 23px;
padding-top: 5px;
margin-top: 14px;
margin-right: 10px;
}
.autos_01 div.details a:hover {
font-weight: bold;
color: #cccccc;
text-decoration: none;
}
</style>

<div class="autos_01">

<div class="details">

<a href="http://www..........com/" target="_blank"><img src="http://www..........com/img/fototransparente.png" alt="autos" /></a>

</div>

</div>

Aunque funciona te pido por favor si me puedes ayudar a depurar el código para ie8...,

Moví mucho el padding pero no sé si hice bien?.

Muchas gracias de nuevo!.

cristian_cena · #9 (**permalink**) 26/05/2011, 10:37

no man, olvidate de los float XD. usa position relative y absolute tal como muestran en el ejemplo. y en los códigos que te pasé. Con esto también te olvidas de los padding y tu código cambia al 100%.

Hacelo sobre el código que te pasé, si algo no anda publicalo y lo vemos, pero sobre eso. Además de que si usas position en ie se va a ver perfecto sin tener que arreglar el flotado ni hacer nada raro.

Abrazo.