Making your images clickable can add extra functionality to your projects or pages in EHQ. By doing this you will be able to direct your community to extra pieces of information to help inform them about your project goals.
There are two main ways to make images clickable in EHQ.
- Use the WYSIWYG editor and image upload tool
- Use HTML Code in in the code view
Deciding on which option to choose will depend on where you are trying to make your images clickable. For the best part however, there are very few differences between the two methods, except one requires you to understand basic HTML syntax and the other simply generates it for you.
Using the WYSIWYG
In order you use the WYSIWYG editor to make your images clickable you need to do the following;
- Open your project and manage project description.
- Use the image icon to insert your image
- Click on the image to reveal options and click on the link ico
- Add the URL of where you would like the image to link to and choose the option to open in a new tab if you require
Using HTML Code
Adding HTML code to your projects is another way to make images clickable. In order to do this you will need to understand basic syntax. You can use HTML anywhere you can switch to code view including;
- WYSIWYG editors
- Using a custom widget
- In survey header question types
- Homepage freestyle widget
Before you can insert a clickable image using HTML you will need to ensure that your image is already uploaded somewhere on the web as you will need to copy the image URL. This can be either in your photo gallery or an external site. If it is in the photo gallery, please have a look at this guide on how to obtain the right image location.
To add a clickable image using HTML you can use the following code:
<a href="insert destination URL here"><img src="insert image location here" title="insert title" alt="insert description here"></a>
Replace the text in the quotation marks as below:
- insert destination URL here: Replace this with the actual link, where you want to direct your visitors to when they click on the image.
- insert image location here: Replace this with the location of the image you want to make clickable (hence ‘img src’. src stands for source).
- insert title: this is for accessibility - for e.g. people who use screen readers, hence we recommend as good practice to give the image a title.
- insert description here: Replace this with an alternative description. This is also important for accessibility reasons as above.
Copy and paste this code, after clicking on the </> icon in the editor.
NOTE - You also have the option of using a custom widget to create clickable images as described in detail in the article on Using a custom widget to display clickable images.