Recortar o seleccionar una sección de una imagen en HTML

[rolomo]

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

[#!drvy]

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 (css) [Seleccionar] Expandir

.madrid {
/* Color por defecto en caso de que no se cargue la imagen */
background-color:#000;

/* url de la imagen */
background-image:url(image.ashx.gif);

/* Hacemos que la imagen no se repita */
background-repeat:no-repeat;

/* Posicion del fondo */
/* Primero horizontal (-250px) y luego vertical (-150px). */
background-position: -250px -150px;

/* Cuanto de ancho es el div (cuanto quieres que se muestre de la imagen) */
width:200px;

/* Cuanto de alto es el div (cuanto quieres que se muestre de la imagen) */
height:200px;
}

Luego solo haría insertar esto en tu tabla.

Código (html4strict) [Seleccionar] Expandir

<div class="madrid"></div>

El resultado seria mas o menos este:


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

Saludos

[rolomo]

Muchas gracias.
Lo pruebo y te digo como me queda.

[rolomo]

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.