Setting Images as Popup Links (eCreator)

Ensure that you have clicked into the page content window via the Pencil icon within the page you want to edit and that you have already inserted an image and popup link text.  NB you may find the next steps easier if you have given the popup link a title such as 'popup link'.

See the 
Adding Attachments to the Page and Adding Popups sections of the Add a new page to an eCreator course (eCreator) guide if you are unsure how to add an image and popup.



Click the Source code button at the top of the window.


The Source code window will be displayed, which shows the HTML code for the page.  It may have more text in than the below example, depending on the amount of text you have on your page, but don't worry about the code as we'll go through how to amend it in the next steps.


First we need to find the code for the image we’d like to move. As you’ll see below, it’s the code which starts <img and ends with />.  Highlight the code.


Right-click
on the code you have highlighted and click on Cut within the menu.


Locate the 
popup title text within the code and highlight it. 


Right-click
on the code you have highlighted and click on Paste within the menu.  


You have just replaced the text link to your popup with your image!  Click on OK to save the changes.


Click on the Save button at the top or bottom of the screen.


Click on the Preview button.


Check that your popup text has gone and that the popup works by clicking on the image instead.

Sometimes, moving the link can cause an issue with the formatting of the original page.  In the example below, we now have too much space between the text and the image.  To rectify this, click back into the page content window via the Pencil icon and delete any extra spaces.  Click on Save within the window when you are happy and click the green Save button at the top or bottom of the page to save the changes completely.


Feedback and Knowledge Base