Cajas con barras de desplazamiento (Scrollboxes) con imágenes

Como hemos explicado en el post anterior, los Scrollboxes son cajas que disponen de barras de desplazamiento, y nos ayuda a simplificar mucho las entradas de nuestro blog cuando precisamos poner un texto largo.


Pero además de poner textos también podemos incluir imágenes, modificando un poco el HTML que vamos a utilizar,como muestro aquí:

Este es el código que he utilizado, y como he comentado en el anterior post voy a mostrar lo más importante de este código.

<div style="border:1px solid black;width:220px;height:230px;overflow:scroll;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijk2Nb8jQxe5QhbIjdli5u07zNOXGyyH58REy1Ujy-24jnlsmCz19dORA_FcnThpsTUYNBqqXvBXEYLJRYMEoZHOVNJkcEHbOC12m11dNMIr4BYSJYeaJycj7KpGXHJbIkR0iH6J81YUMX/s1600/Mickey-Mouse-Sport-33583.gif" width="150" height="217" alt="Cartoon" /><br />
<img src="http://www.animatedimages.org/data/media/1358/animated-mickey-mouse-and-minnie-mouse-image-0017.gif" width="204" height="181" alt="Cartoon" /><br />
</div>

Para cambiar algunos datos usaremos:

<div style="border:1px solid black : es el tipo de borde.
En este caso es un borde sólido de 1px de anchura, de color negro.

En este otro post mostraré como cambiar los tipos de borde de nuestra caja.

width:220px;height:230px, Esto indica la altura y el largo de la caja. Width altura, y height el largo.

<img src="" width="150" height="217".

Esta parte indica la url de la primera imagen: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijk2Nb8jQxe5QhbIjdli5u07zNOXGyyH58REy1Ujy-24jnlsmCz19dORA_FcnThpsTUYNBqqXvBXEYLJRYMEoZHOVNJkcEHbOC12m11dNMIr4BYSJYeaJycj7KpGXHJbIkR0iH6J81YUMX/s1600/Mickey-Mouse-Sport-33583.gif

Podemos cambiar la imagen por la que queramos solo poniendo la URl de la nueva imagen.

width="150" height="217" y este es el código del tamaño de la imagen: en este caso hemos puesto 150 de altura y 217 de ancho.

En el caso de la segunda imagen hemos puesto lo mismo pero he cambiado el tamaño de la imagen width="204" height="181"
También podemos poner una imagen de fondo en nuestra caja como muestro en este otro post.