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

Herramientas para nuestro hosting sin base de datos

Los siguientes sistemas que podremos agregar a nuestro hosting PHP, no dependen de una base de datos como lo es MySQL, sino que trabajan directamente sobre archivos en formato JSON o CSV. Herramientas Codiad Es un editor de códigos colaborativo, que implementa la herramienta de edición de código ACE. Tiene un ecosistema de plugins libres para utilizar. Permite agregar usuarios que editan. Sitio de Codiad KodExplorer y KodFile Es una muy buena aplicación de origen chino, para administrar archivos y carpetas en nuestro hosting. Viene con un editor de código, ACE, y un ecosistema de aplicaciones conectadas, como por ejemplo, para visualizar archivos de PowerPoint, Excel o Word, y acceso a base de datos mediante Adminer.php. Descargá KodExplorer desde aquí KodFile, KodExplorer simplificado Un informe de qué es KodExplorer Generador de Código QR Gracias a la herramienta de código de David Shim, haciendo un script JavaScript se puede crear un generador de códig...
Publicar un comentario
Leer más

Ficha herramienta JavaScript: Responsive-nav

Descarga de sitio oficial... Responsive nav Se instalan... - responsive-nav.css (en HEAD) - responsive-nav.js (en HEAD) Se construye un DIV (o lo que sea) bien identificado. <div id="menuResponsive">...</div> Se habilita... en un SCRIPT al final, justo antes del </body> con... var Opciones = {} ; var Menu = responsiveNav( "#menuResponsive", Opciones ) ; Opciones posibles: { label: "Haceme click X" }
Publicar un comentario
Leer más