The Link Image widget allows you to show different images on the web page depending on cell values or formulas. Now you can build advanced imaging applications where an image on the screen changes with the values in a web form or calculator.
When you paste static images into the cells of an Excel spreadsheet, the same image is always shown, regardless of what’s going on in the spreadsheet.
With the Link Image widget, you can freely switch between multiple images. Just provide a link to the right image in a cell in your spreadsheet. The image link can be picked from a list or dynamically created by cell values and formulas in the spreadsheet. When the link changes, the Link Image widget automatically shows the right image.
This is useful in many situations:
Widgets like Link Image provide web-related features that are not available in plain Excel. If this is the first time you use widgets, you should first read the introduction to using widgets. Most important is that widgets are fully visible only in the web environment. You don’t see much of them until you convert the spreadsheet to a web page.
The below example comes from the membership application tutorial, where the Link Image widget plays an important role.
In this membership application form, the new member selects a home country using a Dynamic Dropdown widget. A link to the new member’s country flag is saved with the form. Thanks to the Link Image widget, the right flag is also shown at the bottom of the form.
Try it for yourself! Select your home country in the form and watch the flag change.
If you enter all the required data in the form, you can press the Submit button and see what a form like this looks like when someone submits it to you.
Disclaimer: Working with country data is complicated. Some countries may be more disputed than others. Some countries may have a different official name than you think. Our source for country codes and official country names in English is Wikipedia. Our source for country flags is Flagpedia. For countries without a flag in Flagpedia, we show the flag for the United Nations. Over time, the source may divert from the copy used here. We regret if any part of this tutorial offends you, including the list of countries and their flags.
Any images you wish to use with the Link Image widget must be published on the web before you can use them in the widget. The widget does not store the images it is showing; all images are fetched live from the web.
All your web users must have access to all the images. If one or more images are protected by a login, you should put the form behind the same login so that all the users can view the images you link to. If your image is reserved for particular “friends” or “members”, you must ensure that all your users indeed belong to this category – otherwise, they won’t be eligible to view the images.
We recommend that you store the images in such a way that you can use secure links (beginning with https) to the images. If you use an electronic form with our Advanced Submit Service, any secure images will be included in the PDF file for each submitted form.
Many widgets require background data that you don’t want to make visible on the web page. In most situations, it is very convenient to have one or more background data sheets to keep this data in. Using the Worksheets tab of the task pane, we can easily mark this worksheet as hidden in the converted web page.
If you have a list of static image links, you can just paste these into the hidden worksheet.
You can also construct dynamic image links any way you like, using any available cell values and formulas:
="https://example.com/products/" & prod_num & "/images/" & image_num & ".png"
The electronic forms that you create with SpreadsheetConverter don’t have to be plain. You can use all the formatting options in Excel like column width, background color and character size. Excel doesn’t know much about web page design, so we added a simple Theme Designer to give you full control over the formatting of the web page.
Below is a further developed version of the same membership application form. We just changed the background color to brown, and the foreground color to white.
The spreadsheet must contain a full inventory of the links you will be using with the Link Image widget. Usually, you will save the image links in a hidden background worksheet.
Here is an example of background worksheet with a list of countries, and a link to the flag for each country.
In the example above, the image links are in column F. The index to the table is the two- or three-character ISO code in column A and B, respectively. You can also use a numeric code in column C or the country name in column D.
To find the right image link, and provide it to the Link Image widget, it is common to use the VLOOKUP function in Excel:
=VLOOKUP(A16;Countries!$D$1:$F$251;3;FALSE)
What the formula does:
Image widgets like Link Image, Google Map or barcode are represented in Excel using an empty placeholder. The placeholder cannot show the correct image in Excel, but it allows you to position the image correctly within the form and give it the correct size. When you convert the spreadsheet to a web page, the widget replaces the placeholder with the actual image it is supposed to show, e.g. the map or barcode.
Before you insert any kind of image widget we always recommend that you merge the cells behind the image placeholder. In most cases it works fine anyway but merging the cells makes it much more obvious to both you and SpreadsheetConverter where the image is supposed to go.
To insert a Link Image widget, select the cell where you want the upper left-hand corner of the placeholder to appear. Make the task pane visible. Locate the Widgets tab and click on the Link Image widget icon to insert the placeholder into the selected cell.
When you insert the Link Image widget into a cell, you also need to tell it in what cell it can find a link to the image it is expected to show. Set the Image Reference to the cell that contains this link. In this example, the link is returned by a VLOOKUP formula in cell A17.
You can drag the placeholder to the best position, and change the size of the image as it appears in the web page by dragging the placeholder’s handles. In our case, we made the placeholder the same size as the merged cell area behind it. To adjust the width and height to an exact size in pixels, enter your numbers in the corresponding widget settings and click Apply.
Note: the Link Image widget never distorts the images. If you have a lot of images in various sizes, you can still specify a maximum width and height here. Each image will be resized proportionally to fit entirely within the placeholder.
The Link Image widget provides a convenient way to display an image on the web inside a placeholder on the web page. The source is a table of image links, usually stored on a hidden worksheet. You can use any static or calculated value in the form or calculator to look up the right image in real-time as the user works with the web page.
Some of our tutorials partly focus on the Link Image widget:
