Mostrar imgenes asociadas a un

desplegable
Quizs te hayas preguntado alguna vez, como podras seleccionar un dato de un
desplegable, y que al lado salga su foto, es decir, que salga la foto asociada al elemento
seleccionado del desplegable. Esto es especialmente til por ejemplo, si tenemos un listado
desplegable de productos o de empleados, y queremos que al seleccionar cada empleado o
artculo, nos salga al lado la foto de cada uno de ellos.
Verdad que parece un tema interesante?. Pues nada, vamos a tratar de explicarlo, porque
no tiene mucho secreto.
Lo primero que tendremos que hacer, es que las imgenes (fotos de los empleados, de los
productos, etc.) sean todas del mismo tamao, para que no se muestren unas imgenes
grandes y otras pequeas, y nos quede poco elegante. Adems, es importante que las fotos
no tengan espacios vacos, ni acentos (tampoco los elementos del desplegable), para que los
usuarios de todos los pases puedan utilizar el cdigo sin problemas. En lugar de utilizar
espacios vacos, usaremos guiones. Por ejemplo, si tenemos un listado de artculos, y hay
uno que se llama Bidones de 50 litros, a la foto le pondremos como nombre Bidones-de-
50-litros.jpg. Lo recomendable -para tener un cdigo bastante simple, como el que os
muestro en este artculo-, es que las fotos tengan todas la misma extensin, o todas "jpg",
o todas "gif", o todas "png", etc. En el caso de que utilicis otra extensin distinta a "jpg",
tendris que cambiar la lnea del cdigo fuente que veris al final de este artculo, para que
en su lugar aparezca "gif", o la extensin que utilicis para vuestras imgenes.
Las fotos y el libro de excel con el desplegable, los guardaremos en la misma carpeta o
directorio. Si estuvieran en directorios diferentes, deberamos modificar el cdigo VBA
para informar de la ruta correcta de las imgenes.
Vamos a explicarlo con un ejemplo. Yo he utilizado una serie de vehculos clsicos (de los
cuales soy un apasionado, todo sea dicho de paso), de tal forma que cada vez que
seleccionemos uno de los coches, nos saldr debajo su foto correspondiente. Si por ejemplo
seleccionases en el desplegable, el Golf GTI mk1, aparecera esto en tu pantalla:
Y si seleccionases por ejemplo el Seat 124 Sport, aparecera esto de forma automtica:
Lo primero ser crear en la Hoja2, un listado con los coches que tenemos. En este caso
tenemos 5 vehculos, tal y como se muestra en la imagen siguiente:
Ahora, le pondremos un nombre al rango de datos comprendido entre B4 y B8, para lo que
seleccionaremos ese rango, y definiremos un nombre para el mismo. En este caso, le he
puesto como nombre coches, tal y como se puede ver en la zona enmarcada en rojo, en la
siguiente imagen (para definir un nombre, la forma ms sencilla es escribir el nombre en
esa zona enmarcada en rojo, y pulsar intro):
Ahora ya sabemos que el rango de celdas que hay entre B4 y B8 de la Hoja2, se llama
coches.
A continuacin pasaremos a la Hoja1, y por ejemplo, en la celda C4, crearemos la lista
desplegable con los coches, para que cada vez que seleccionemos un modelo, nos salga
debajo su foto correspondiente. Para ello, seleccionaremos en el men Datos, la opcin
Validacin, y en la pestaa Configuracin, que es la que nos saldr por defecto en
primer plano, elegiremos en Permitir la opcin Lista, y en Origen introduciremos el
nombre definido anteriormente, precedido del signo igual, tal y como se muestra en la
siguiente imagen:
De tal forma que tendremos algo como esto que se muestra en la siguiente imagen, al pulsar
en la flechita del desplegable:
Una vez hecho esto, solo nos quedar copiar y pegar el cdigo que har que se nos muestre
la foto, pero no lo incluiremos en un mdulo, sino dentro de la Hoja1, tal y como se
muestra en esta imagen:
El cdigo que tenemos que copiar y pegar en la Hoja1, es este:
Private Sub Worksheet_Change(ByVal Target As Range)
'Si ha errores, que contine
On Error Resume Next
'Si cambiamos el dato de la celda C4,
'mostramos la foto de ese vehculo
If Target.Cells = Range("C4") Then
'Ocultamos el procedimiento
Application.ScreenUpdating = False
'pasamos a una variable, el nombre de la foto,
'que ser el mismo que el nombre del coche, pero
'separado con guiones, y sin acentos, para que
'todos los usuarios puedan verlo correctamente
foto = Range("C4").Value
'en la foto, reemplazamos los espacios, por guiones
foto = Replace(foto, " ", "-")
'ahora le aadimos la extensin "jpg"
foto = foto & ".jpg"
'ahora buscamos la foto en el mismo directorio
'donde tenemos este fichero de excel
rutayarchivo = ActiveWorkbook.Path & "\" & foto
'borramos la foto del coche (si hubiera alguna)
Me.Shapes("foto_del_coche").Delete
'creamos el objeto fotografia, con la foto insertada
Set fotografia = Me.Pictures.Insert(rutayarchivo)
'haremos que la foto ocupe desde B6 hasta D21,
'para que no salgan fotos supergrandes, o
'superpequeas, y salgan ms "normalitas"
With Range("B6:D21")
Arriba = .Top
Izquierda = .Left
Ancho = .Offset(0, .Columns.Count).Left - .Left
Alto = .Offset(.Rows.Count, 0).Top - .Top
End With
'le ponemos un nombre al objeto "fotografia"
'para poder borrarla cuando cambie la celda D6
'(ver que borramos la foto que hubiese, antes de insertar la nueva)
With fotografia
.Name = "foto_del_coche"
.Top = Arriba
.Left = Izquierda
.Width = Ancho
.Height = Alto
End With
'eliminamos el objeto
Set fotografia = Nothing
'ponemos todo como estaba
Application.ScreenUpdating = True
End If
End Sub
Ese cdigo lo que hace es insertar la foto, de cada uno de los coches, cada vez que
seleccionemos uno de ellos. Para ello, debemos tener presente una serie de variables que he
utilizado, para simplificar el cdigo VBA:
1.- Las fotos y el fichero deben estar en el mismo directorio.
2.- Las fotos y los modelos de vehculos, deben tener el mismo nombre (en ambos casos sin
acentos, y en el caso de las fotos, sustituyendo los espacios por guiones).
3.- Las fotos deben tener todas la misma extensin (en el cdigo vers que aparece por ah
la extensin ".jpg").
Desde aqu podis descargar el fichero de excel, con el ejemplo que os presento en este
artculo, junto con las imgenes de los vehculos clsicos, para que podis ver en
funcionamiento como se crean listas de validacin con imgenes asociadas a cada elemento
del desplegable.
0RVWUDU LPiJHQHV HQ XQ IRUPXODULR
En un artculo anterior, habamos visto como mostrar imgenes asociadas a un desplegable,
directamente en nuestra hoja de clculo Excel. En esta ocasin, os muestro una forma de
hacer lo mismo, pero incluyendo las imgenes en un formulario, es decir, en un userform.
La tcnica en ambos casos es muy similar, as que esto lo que explique en este artculo,
estar chupado, para aquellos lectores del blog que ya se hayan ledo el artculo o que
comentaba en el prrafo anterior.
Como siempre, vamos a ilustrar esta tcnica con un sencillo ejemplo. Para ellos, hemos
escogido una serie de construcciones, en este caso, torres, de diferentes ciudades, y de
diferentes pases. Solo hemos puesto unas pocas, para que vosotros aadis las que creis
convenientes.
Lo primero que vamos a hacer es montar la lista que se muestra en la siguiente imagen, y
de paso tambin crearemos un botn, para asociarlo a un macro, en este caso, al macro que
lanza el userform.
Lo siguiente que debemos tener, es una lista con las imgenes, y que necesariamente se
llamarn de la misma forma a como aparecen en la columna A de la imagen anterior
(evidentemente, sin tener en cuenta la extensin correspondiente, en este caso, jpg):
Ahora procederemos a crear un formulario en Excel, donde incluiremos dos etiquetas (dos
label), una para el ttulo del formulario en s, es decir, un rtulo con el texto "Torres
famosas", y otra para mostrar la ciudad y el pas donde se encuentra la torre elegida.
Tambin incluiremos un ComboBox, donde al desplegarlo, podremos elegir la imagen. Por
supuesto, incluiremos tambin un control de imagen, para que se muestre la imagen elegida
en el ComboBox, y finalmente, lo ltimo que incluiremos ser un CommandButton para
que al pulsar sobre l, se cierre del formulario. Es decir, haremos algo como lo que se
muestra en la siguiente imagen:
Ahora solo nos quedar incluir el cdigo que ir asociado a los controles. Comenzaremos
con el cdigo del ComboBox, al hacer click sobre l:
Private Sub ComboBox1_Enter()
'En caso de error, que contine
On Error Resume Next
'limpiamos los datos del Combobox
ComboBox1.Clear
'Al inciar el formulario,
'seleccionamos la hoja con los datos
Hoja1.Select
'Seleccionamos la celda B5
Range("A2").Select
'Vamos a llenar dinmicamente el combobox
'con los nombres de los artculos, hasta
'encontrar una fila vaca
Do While Not IsEmpty(ActiveCell)
'ponemos el nombre del producto
ComboBox1.AddItem ActiveCell.Value
'bajamos una fila
ActiveCell.Offset(1, 0).Select
Loop
End Sub
Ahora le toca el turno al cdigo que nos servir para mostrar las imgenes, cada vez que
cambiemos el item del desplegable, en nuestro caso, del ComboBox:
Private Sub ComboBox1_Change()
'definimos la ruta donde tenemos el fichero de excel
'(que ser la misma donde tengamos las imgenes)
ruta = ActiveWorkbook.Path
'definimos los nombres de las imgenes
imagen = ComboBox1.List(ComboBox1.ListIndex) & ".jpg"
'ahora definimos la ruta y la imagen
ruta_e_imagen = ruta & "\" & imagen
'cargamos esa imagen en el cuadro de la imagen
Image1.Picture = LoadPicture(ruta_e_imagen)
'ahora ponemos el nombre de la ciudad y el pas en el label2
Cells.Find(What:=Replace(imagen, ".jpg", "")).Select
Label2 = ActiveCell.Offset(0, 1) & " (" & ActiveCell.Offset(0, 2) & ")"
End Sub
Con los dos macros anteriores, lo que hemos hecho, ha sido por un lado llenar el
ComboBox al hacer clic en el desplegable (con los datos de la hoja de clculo), y por otro
lado, cada vez que cambiamos el elemento seleccionado en el ComboBox, mostrar la
imagen correspondiente a ese elemento seleccionado.
Ahora solo nos quedar incluir el cdigo que tendremos asociado al botn "Cerrar":
Private Sub CommandButton1_Click()
'descargamos el formulario de memoria
Unload Me
End Sub
Todo el cdigo que hemos visto hasta ahora, va incluido dentro del propio UserForm, pues
es el cdigo asociado al mismo. En cambio, este ltimo cdigo, que os incluyo, es para
lanzar el formulario en s, por lo que lo pondremos dentro de un mdulo:
Sub Lanzar_formulario()
'lanzamos el formulario
UserForm1.Show
End Sub
Con esto tenemos todo listo, para mostrar un formulario tan llamativo como este:
Desde aqu podis descargar un fichero comprimido, que incluye el fichero Excel y las
fotos de las torres, que hemos visto en este artculo.