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

Entradas más populares de este blog

Agregar degradados como fondos

Agregar degradados mediante CSS Degradado lineal y degradado radial o elíptico. Degradado lineal La expresión inglesa para indicar linealidad es  linear . .deg-lineal-1 { /* Degradado vertical */ background-image : linear-gradient ( red, black ) ; } .deg-lineal-2 { /* Degradado según un ángulo decimal */ background-image : linear-gradient ( 45deg , red, black ) ; } .deg-lineal-3 { /* Degradado con transparencia */ background-image : linear-gradient ( 45deg , black, rgba ( 0 , 0 , 0 , . 4 ) ) ; } .deg-lineal-4 { /* Degradado con varios puntos de colores */ background-image : linear-gradient ( 45deg , red, blue, black ) ; } Degradado elíptico o circular La expresión inglesa para indicar radialidad es  radial . .deg-eliptico-1 { /* Degradado elíptico, se adapta a la proporción del DIV */ background-image : radial-gradient ( red, blue...
Publicar un comentario
Leer más

Tablero para crear juegos

Tablero SVG - Aplicación del While  Crear un archivo nuevo de HTML con el siguiente código: < style > * { box-sizing : border-box ; font-family : Segoe UI Light, "Ubuntu" ; } svg { margin : auto ; display : block ; } rect { transition : 300 ms all ; } rect :hover { } #juego { background : url ( paisaje.svg ) center center ; background-size : cover ; } body { } </ style > < svg id = " juego " > < / svg > < script > var generarRect = function ( id, origen, medidas, colores ) { var r = "<rect " ; r + = "id='" + id + "' " ; r + = "x='" + (origen.x | | origen[ 0 ]) + "' " ; r + = "y='" + (origen.y | | origen[ 1 ]) + "' " ; r + = "width='" +...
Publicar un comentario
Leer más

Actuadores hidráulicos y neumáticos

Neumáticos Hidráulicos
Publicar un comentario
Leer más