Ir al contenido principal

Trabajar con imágenes en HTML

Imágenes

Ícono del sistema

<head> 
  ...
    <link
        rel="icon"
        href="ubicacion/del/archivo.img"
        id="el-icono"
    />
  ...
</head>
Formatos: { .png, .bmp, .jpg, .ico, .gif }

Objeto imagen

<body>
    ...
    <img
        src="ubicacion/del/archivo.img"
        width="opcional-ancho"
        height="opcional-alto"
        id="nombre-imagen"
   />
   ...
</body>

Como fondo de un DIV

    objetos-a-controlar {
        ; background-image: url( ubicacion/del/archivo.img/desde/el/css ) 
        ; background-position: center center  /* Para coincidir ambos centros */
        ; background-size: cover|contain| 600px 500px
    }

Mediante JavaScript
Construimos un objeto llamado Image() mediante el constructor new de JavaScript. Debemos considerar que la imagen quizás tarde en descargarse si se invoca desde la web, por eso se utiliza el evento .onload()
    var GUI = {} ;
    // ...
    GUI.nuevaImagen = new Image() ;
    GUI.nuevaImagen.src = "ubicacion/del/archivo.img" ;
    GUI.nuevaImagen.onload = function( situacion ) {
        console.log( "La imagen ha sido cargada con éxito" ) ;
    }
    console.log( "La imagen se está cargando" ) ;
    document.body.attachElement( GUI.nuevaImagen ) ;
Etiquetas:

Comentarios

Publicar un comentario