The Link Image widget allows you to show different images in 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 all the available images on the web. You select what image to show at any one time by providing a link to the 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.
This is useful in many situations:
In the below animation, each fruit has it own image. Selecting a different fruit in the dropdown menu selects a different image link that points to another image.
The images used in the Link Image widget must be available on the web. You can link to any image on the web that all your web users can access.
If your image is protected by a login, all the users of your web form or calculator must be logged in to view the image. If your image is reserved for particular “friends” or “members”, you must ensure that all your users belong to this category so that they are eligible to view the image.
There are many free web hosting services that can provide public links for images, including Dropbox, Instagram and Facebook. Once again remember that if an image has been uploaded with restricted access, like “only available to my friends, and their friends”, or if you’ve saved it on your company intranet behind a firewall, it may be unavailable to some users of your calculator or web form.
The link to the image can come from a static list of image links as in the example above. To pick the right link from the list, you can use a menu or a formula like VLOOKUP.
You can also construct dynamic image links any way you like, using any available cell values and formulas:
="http://example.com/products/" & prod_num & "/images/" & image_num & ".png"
This tutorial shows you an example of how the Link Image widget can be implemented in a web page.
In this tutorial, we will use Dropbox to host the spreadsheet and the images and provide us with a public web link to each image. If you haven’t used Dropbox before, you may want to read the Dropbox tutorial before you continue.
Before you upload spreadsheets or images to your Dropbox account, you must authorize SpreadsheetConverter to use the account. You do this from the SpreadsheetConverter menu ribbon in Excel. Click Share, then Dropbox share. If you haven’t already done this, there will be an Authorize Dropbox link in the Dropbox dialog as in the screenshot below.
If the Authorize Dropbox link isn’t there, your installation of SpreadsheetConverter is already connected to a Dropbox account, and you should verify that it is the right Dropbox account.
Visit http://www.dropbox.com and log in to the same account, the one that you have authorized for use with SpreadsheetConverter. Check if an Apps folder has been created in your Dropbox. This is the only folder in Dropbox from where you can get public image links that work on any web page. If you link to images in other Dropbox folders, the images will instead open in the Dropbox image browser.
Click through to the SpreadsheetConverter folder inside the Apps folder.
For this tutorial, we will upload the images to the SpreadsheetConverter folder inside the Apps folder. We create a separate sub-folder Apps > SpreadsheetConverter > phone comparison pics so that these images do not get mixed up with other objects.
To get the public web link of the images, right-click on the name of each image file and select Copy public link…
We will need all these links in our spreadsheet, so we paste the public link to each image into the example spreadsheet.
Notice how the image links end with the same model name as in column B. This kind of table allows you to select the image link that corresponds to a particular model name.
Depending on your application, you need a widget or formula that selects the right image link. You can use any mechanism in Excel to do this – menus, radio buttons, conditions like IF, table lookups like VLOOKUP or any other formula.
In this example the user will select a smartphone model from a dynamic dropdown menu. We want to show an image of the selected model, and so we create a simple formula in call A22 that picks the right link from the C column depending on the value of the dynamic dropdown widget in cell C7. (Yes, we know it would have looked a lot cooler if we had used a fancier mechanism like VLOOKUP to pick the image corresponding to the model, but some days just are “plain IF” days, you know?)
In Excel, select the cell where you want the upper left-hand corner of the image to appear. Make the SpreadsheetConverter task pane visible. Locate the Widgets tab and click on the Link Image widget to insert an image placeholder into the selected cell.
The Image Reference cell contains the link to the image you want to show, in our case A22.
You can change the size of the image as it appears in the web page by adjusting the Link Image placeholder. Either drag the sides or corners of the placeholder, or adjust the width and height in pixels in the widget settings and click Apply.
Click on Convert in the SpreadsheetConverter ribbon to convert the spreadsheet to a web page. The converted web page usually opens automatically in one or more of your web browsers. Otherwise, make the History list visible and open the converted web page from there.
In the web page, select a different phone model and watch the image change to show the selected model.