Normally when you think of links, you think of text that has been coded to take you to a different website. This text is not only boring, but also fails to provide a visualization or explanation of what the linked website contains.
An alternative to text links are image links. Image links are images that have been turned into a link. This can be especially useful in providing an image that is linked to a website explaining its significance, or when providing an image of, for example, a formula whose link takes you to an interactive web page that allows you to solve for the formula. In short the possibilities are numerous and can adapt to any context, whether it is for instructional or personal use. Examples of text vs. image links is provided below:
Text Link:
Student Technology Program
Image Link:
This entry will explain how to make any image that you choose into a link. The process is relatively simple, with two methods to creating an image link.
The first method involves creating your own image to be turned into a link. To do so you would follow the simple format:
1. First you make or choose your image
2. Then you upload your image to a server
3. And finally, you input the html code to make an image link
The second method involves using an image that is already available online. To do so you would follow the simple format:
1. Copy the image URL
2. Paste the image URL into the code for an image link.
The following is a description of the First Method:
There are two ways that you can choose your image. The first is to search for your image in a search engine (such as Google, Yahoo, or MSN) and then saving it to your computer as an image file (JPEG, etc.). *
The second option that you have is to create your own image. This can be done by uploading your own picture from a camera, or taking a screenshot of the image that you would like to turn into a link. Please refer to my colleague's, Dobromir Trifonov's, post regarding screenshots:
Take Screenshots....
Now that you have your image selected, you will have to upload it to a server. You can use any server, although for this entry I will assume that you are working with Moodle and will therefore discuss uploading an image file to its server.
First, you must access your course in Moodle and click on the Files link under the Administration box.
Once there you can either make a folder (making a folder will be necessary if you want to have an organized collection of files on Moodle) or simply upload a file.
Once you have uploaded your file, you will be able to see a link to see your image. Right click on this link and select the option Copy Link Address. This is your image source.
The HTML code for creating an image link is as follows:
<a href="Website Link" border="0"><img alt="" src="Image Source" title="Title to Appear when Mouse Hovers over image" width="width pixels" height="height pixels" /></a>
Once again, you will only be manipulating the following segments of code Website Link, Image Source, Title to Appear when Mouse Hovers over Image, and width/height pixels. The Website Link will be the URL of the website that you are linking to. Your final code should look similar to this:
<a href="http://blogs.trincoll.edu/sta/" border="0">
<img alt="" src="http://b27.cc.trincoll.edu/weblogs/sta/Image Links/Picture%202.png" width="400" height="87" />
</a>
Notice how the italicized portion of the text is simply your image's image source.
Now all you need to do is copy and paste this code wherever you want your image link to appear.
The second method, using an image already online, is very simple. First you locate your image, then you right click it, select Copy Link Address and then paste the link address (your image source) into the corresponding location of the HTML code for image links.
If you have any questions or concerns regarding this, or any, STA Blog Post, please feel free to call the STA Office at extension x2589 or come and speak with one of our Student Technology Assistants during our normal business hours. Thank you.