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

JavaScript: Conjuntos de datos, u Objetos planos

Objeto plano Conjuntos de datos Un conjunto de datos se define como: {} ; Los datos se los insertamos mediante mencionarlo, y de por medio un punto mencionar el dat que agregamos al conjunto. {}.datoNuevo = 34 ; {}[ "datoOtro" ] = 55 ; Pero el problema es que  {}  crea un objeto distinto. Es decir, es lo mismo... {} ; que new Object () ; Entonces si queremos trabajar con un mismo conjunto deberemos ponerle nombre a través de una variable que lo referencie en memoria. Ejemplo: var miConjunto = {} ; var otroConjunto = {} ; Ahora, a cada conjunto le iremos agregando datos nuevos con el método anteriormente mencionado. miConjunto.datoNuevo = 34 ; miConjunto.otroDato = 55 ; otroConjunto.suDatoNuevo = 56 ; Para saber qué contiene en el momento dado conjunto deberemos realizar un  console.log() ... console .log( miConjunto ) ; Esto nos dará en la consola algo como... { "datoNuevo" : 34 ...
Publicar un comentario
Leer más

Módulo para contactar con un NodeJS Server en localhost

El presente código sirve tanto para Visual Basic 6.0 (sí, todavía sirve, todavía sirve!) como para Visual Basic para Aplicaciones (Excel o VBA). ' Si estamos en Visual Basic para Aplicaciones agregar la referencia ' WinHTTP, en el menú Herramientas, Referencias, Microsoft WinHTTP Services Function Solicitar( _ ByVal URLBase As String _ , Optional ByVal Puerto As Integer = 80 _ , Optional ByVal Seccion As String = "" _ , Optional ByVal Metodo As String = "GET" _ ) As String On Error GoTo solucion #If VBA6 Then Dim objXML As New WinHttpRequest #ElseIf Win32 Then Dim objXML As Object Set objXML = CreateObject("MSXML2.ServerXMLHTTP") #End If objXML.Open Metodo, URLBase & ":" & Puerto & "/" & Seccion, False objXML.send If (objXML.Status = 404) Then Solicitar = "404 Error" Else Solicitar = objXML.responseText End If Se...
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