Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: rolomo en 29 Enero 2012, 17:42 pm



Título: Recortar o seleccionar una sección de una imagen en HTML
Publicado por: rolomo en 29 Enero 2012, 17:42 pm
Hola buenas,
estoy haciendo unas tablas donde en cada hueco pongo una imagen, pero quiero que una de ellas este recortada ya que solo me interesa una comunidad autonoma(ver imagen).

¿Como hago para que quede recortada solo por Madrid(aprox.)?

Muchas gracias.

Imagen:

http://www.sat24.com/image.ashx?country=sp&type=last&time=&sat=vis


Título: Re: Recortar o seleccionar una sección de una imagen en HTML
Publicado por: #!drvy en 29 Enero 2012, 19:40 pm
Hola, con HTML no creo que sea posible del todo pero con CSS seguro que si.

Solo haría falta crear un div con el siguiente css:
Código
  1. .madrid {
  2. /* Color por defecto en caso de que no se cargue la imagen */
  3. background-color:#000;
  4.  
  5. /* url de la imagen */
  6. background-image:url(image.ashx.gif);
  7.  
  8. /* Hacemos que la imagen no se repita */
  9. background-repeat:no-repeat;
  10.  
  11. /* Posicion del fondo */
  12. /* Primero horizontal (-250px) y luego vertical (-150px). */
  13. background-position: -250px -150px;
  14.  
  15. /* Cuanto de ancho es el div (cuanto quieres que se muestre de la imagen) */
  16. width:200px;
  17.  
  18. /* Cuanto de alto es el div (cuanto quieres que se muestre de la imagen) */
  19. height:200px;
  20. }

Luego solo haría insertar esto en tu tabla.

Código
  1. <div class="madrid"></div>

El resultado seria mas o menos este:
(http://i.elhacker.net/i?i=3RNz1DM0POkim__1RmtykmVo) (http://i.elhacker.net/d?i=3RNz1DM0POkim__1RmtykmVo)

PD: Soy malo en geografía, así que no se si lo he situado muy bien xD

Saludos


Título: Re: Recortar o seleccionar una sección de una imagen en HTML
Publicado por: rolomo en 29 Enero 2012, 20:12 pm
Muchas gracias.
Lo pruebo y te digo como me queda.


Título: Re: Recortar o seleccionar una sección de una imagen en HTML
Publicado por: rolomo en 8 Febrero 2012, 02:58 am
Hola buena,

he probado este script y me va de coña. Lo integrado dentro de una tabla y no tengo problema, pero....¿como modifico el tamaño de la imagen una vez cortada?
Porque el "width" y el "heigth" que pones en el código css es para el corte.
¿Puedes ayudarme?

Un abrazo.