Foros del Web » Creando para Internet » CSS »

de html a css

Estas en el tema de de html a css en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 25/05/2011, 15:10
Avatar de elsolodigno  
Fecha de Ingreso: agosto-2009
Mensajes: 225
Antigüedad: 8 años, 2 meses
Puntos: 2
Pregunta de html a css

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...
  #2 (permalink)  
Antiguo 25/05/2011, 15:30
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: de html a css

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.
  #3 (permalink)  
Antiguo 25/05/2011, 15:32
Avatar de elsolodigno  
Fecha de Ingreso: agosto-2009
Mensajes: 225
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: de html a css

Cita:
Iniciado por elsolodigno Ver Mensaje
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!
  #4 (permalink)  
Antiguo 25/05/2011, 15:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: de html a css

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.
  #5 (permalink)  
Antiguo 25/05/2011, 18:24
Avatar de elsolodigno  
Fecha de Ingreso: agosto-2009
Mensajes: 225
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: de html a css

Cita:
Iniciado por cristian_cena Ver Mensaje
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!
  #6 (permalink)  
Antiguo 25/05/2011, 18:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: de html a css

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
  1. <div id="padre">
  2. <img id="imagen" src="http://www.forosdelweb.com/f53/html-css-915895-post3868292/f53/html-css-915895-post3868292/f53/html-css-915895/..." alt="..." />
  3. <a href="#" id="mapa"> ... </a>
  4. </div>

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

Código Javascript:
Ver original
  1. /*esta escrito en jquery tu eliges si usas js puro u otra librería.*/
  2. $("#imagen").hover(
  3. function(){
  4. $("#mapa").fadeIn(0); /*fadeIn() da un display:block;*/
  5. },
  6. function(){
  7. $("#mapa").fadeOut(0); /*fadeOut() da un display:none;*/
  8. }
  9. );


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

Código CSS:
Ver original
  1. #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.
  #7 (permalink)  
Antiguo 25/05/2011, 20:42
Avatar de elsolodigno  
Fecha de Ingreso: agosto-2009
Mensajes: 225
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: de html a css

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), &quot;6d892&quot;, 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!.
  #8 (permalink)  
Antiguo 26/05/2011, 10:10
Avatar de elsolodigno  
Fecha de Ingreso: agosto-2009
Mensajes: 225
Antigüedad: 8 años, 2 meses
Puntos: 2
Respuesta: de html a css

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!.
  #9 (permalink)  
Antiguo 26/05/2011, 10:37
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: de html a css

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.

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:07.