Embedding Images That Have Hyperlinks - tutorial-2
Embedding Images That Have Hyperlinks - Tutorial
This brief tutorial will walk you through the steps to embed your own images and to then create hyperlinks for these images. This tutorial applies to both pages as well as section headings in Angel. Follow the steps below and if you need assistance, contact the facilitators for this online course shell or contact the IT Department by emailing pchelp@csm.edu.
_____________________________________________________
To begin, find or create the image that you would like to embed in your Angel page or section heading. You can do this by using the "snipping tool Links to an external site." on Windows pc systems or downloading/saving an image from the internet, your camera, or wherever you would like the image to come from. Just be sure to adhere to copyright guidelines when using images that you have not personally created/captured (see the course organization checklist Links to an external site. for more details). Once you have obtained the image, save it to your computer.
_____________________________________________________
After you have saved the image to your computer, you will then need to upload this onto Angel and copy the "URL" (or web address) for this image. To upload the image into Angel, enter the course where the page or section heading is that you are wanting to embed the image in. Then upload the image in the same way as you would any other file in Angel (i.e., in the Lesson tab, click on "Add Content," then click "File" from the list of options, find the image on your computer, and upload it - click here for a tutorial on adding content in Angel). Shown below is an example of an image that was uploaded into Angel:
_____________________________________________________
Once you have uploaded your image into Angel, then click on the link so that the image appears in your browser. Next, right-click (i.e., click the right mouse button) on the image and then click on "copy shortcut" or "copy link address" from the pop-up menu as shown below:
_____________________________________________________
Now, go the page or section heading that you would like to embed the image into and find the place where you would like for it to be embedded in the text. Then, click on the "Insert/Edit Image" icon that looks like a mountain with a sun from the icon menu that is located at the top of the page/section heading as shown in either of the images below:
![]() |
![]() |
_____________________________________________________
A box will then pop-up. So, then do the following: 1) Paste the shortcut/link address that you copied in the previous step into the "URL" box. 2) Enter a description of the image in the "Alternative Text" box. This alternative description is important for eReader software for visually impaired persons, so be sure to enter in a meaningful description (for guidelines on accessibility issues, see the course organization checklist Links to an external site.). 3) Finally, set the width or height that you would like to have for the size of the image in the "Width" or "Height" box. Angel will automatically adjust the other one so you only need to enter one of these. The images above are set to a width of either 300 or 400 pixels. By trial-and-error, you can find the width/height that looks best with your page/section heading.
When you are finished, click on the "OK" button and the image should appear in your page/section heading. To reopen the Image Properties box, click on the image so that it is highlighted and then click on the "Insert/Edit Image" icon. You can then edit the properties.
_____________________________________________________
To create a hyperlink for the image, so that students are directed to another file, website, video, etc. when they click on the image, follow these steps: 1) Copy the shortcut, link address, web address, etc. that you would like to link to. 2) Open the settings for the page/section heading that contains the image that you would like to create a hyperlink for. 3) Click on the image so that it is highlighted. 4) Open the Image Properties box by clicking on the "Insert/Edit Image" icon. 5) Click on the "Link" tab of the Image Properties pop-up box. 6) Paste the link that you just copied into the "URL" box. 7) Change the "Target" to be "New Window (_blank)".
When you are finished, click the "OK" button and the image should now be hyperlinked.
_____________________________________________________
Again, these steps should be the same whether you are inserting and hyperlinking an image in an Angel page or a section heading. To continue, close this window to return to the main tutorial page.