elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Recortar o seleccionar una sección de una imagen en HTML
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Recortar o seleccionar una sección de una imagen en HTML  (Leído 9,287 veces)
rolomo

Desconectado Desconectado

Mensajes: 18


Ver Perfil
Recortar o seleccionar una sección de una imagen en HTML
« 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


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Recortar o seleccionar una sección de una imagen en HTML
« Respuesta #1 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:


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

Saludos


En línea

rolomo

Desconectado Desconectado

Mensajes: 18


Ver Perfil
Re: Recortar o seleccionar una sección de una imagen en HTML
« Respuesta #2 en: 29 Enero 2012, 20:12 pm »

Muchas gracias.
Lo pruebo y te digo como me queda.
En línea

rolomo

Desconectado Desconectado

Mensajes: 18


Ver Perfil
Re: Recortar o seleccionar una sección de una imagen en HTML
« Respuesta #3 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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
duda sobre recortar una imagen
Diseño Gráfico
crow666 5 3,099 Último mensaje 4 Septiembre 2007, 23:53 pm
por _loko_
recortar imagen de 5cm de diametro con photoshop
Diseño Gráfico
winsor 1 8,371 Último mensaje 13 Septiembre 2010, 19:40 pm
por Azielito
Seleccionar filas de una tabla HTML con javascript
Desarrollo Web
M3LiNdR1 2 21,539 Último mensaje 20 Diciembre 2014, 23:16 pm
por martindn94
[HTML,CSS,JS] recortar palabras y agregar tres puntos (...) al final
Desarrollo Web
.:Xx4NG3LxX:. 2 2,798 Último mensaje 27 Agosto 2020, 05:20 am
por .:Xx4NG3LxX:.
Se puede recortar una imagen bmp desde una coordenada de la imargen con VBscript?
Scripting
jarpon 3 15,239 Último mensaje 4 Septiembre 2023, 16:26 pm
por Elektro Enjuto
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines