More Linkage
This section will cover two alternative ways to create HTML links. First you’ll learn how to link to an image, video, or other type of file as opposed to linking to a web page. Then you will learn how to create a link that’s a clickable image as opposed to clickable text. The difference may seem unclear right now, but the following examples should clear up the confusion.
Linking to images, video, or other files
Linking to a still image, a QuickTime video, or any other kind of file uses the exact same code. After you have uploaded your file to Movable Type, simply put the URL of the media file inside the href="" part of your link. Just like links to web pages you will want to include the title="" tag for your picture or video. The title should explain what the web user will see when they click on your link. The title will pop onto your screen just like when you scroll over the clickable text of a link to a website.
<a href="http://ehub.journalism.ku.edu/input/wp-content/ uploads/2006/07/alw_trehan.mov" title="Mr. Trehan speaks about badminton">An example of linking to a video instead of a web page.</a>
An example of linking to a video instead of a web page.
Making a clickable image link
If you want to have a picture that is a link (i.e., you click on an image instead of text), you will have to play around with your HTML link code a bit.
First, don’t forget that you’ll still want to use the div code you used earlier when posting your images (If you need to be reminded on how to use the div code check out the Posting Image tutorial). There is one small change to the div code when you use an image as a link. No matter what size your actual image is you will need to increase the style=”width:” by four pixels. So for the example code below the actual image is 211 pixels wide. Therefore, the style="width:" was originally style="width:211px". That needed to be increased by four pixels to style="width"215px"
Now, for a normal clickable text link you would type the text that you want the web user to click on in between the <a> and </a> link tags, but for making a clickable image you want to replace that text with the image code that is generated when you upload your file. For example…
<div class="floatleft" style="width:215px"><a href="http://eastbay.com" title="Buying shoes online" rel="external"><img id="image169" src="http://ehub.journalism.ku.edu/input/wp-content/ uploads/2006/06/hyperflight.jpg" alt="hyperflight example pic" />Cutline goes here<br /><em>Photo: John Doe</em></a></div>
Cutline goes here