Adding graphics

It is possible to type HTML tags directly into most of the Hot Potatoes text boxes, in order to insert images into the Web pages. However, if you want to insert a graphic, you can use one of the built-in functions to help you.

To insert an image that will be on the same website as the page

  1. First, save your data file. Hot Potatoes needs to know where your data is saved to calculate the path from your data to the image.
  2. Click in the textfield where you want to insert the image code.
  3. Choose Local Image from the Insert menu. The following window appears:
  4. Click on the Browse button to get a dialog box to help you choose the image file. If you know the path to the image file, you can just type it into the box.
  5. Fill in any of the other settings until they are the way you want them
  6. Click on the Insert button to insert the tag for that image. Note that the image itself does not appear in the textbox, only the tag that tells the browser where to get the image.

Hot Potatoes assumes that you will save your web pages in the same folder as your data file, and calculates the path between the pages and images accordingly. If you do not intend to put your HTML pages in the same folder as your data file, or if the image files will be in a different place relative to the pages on the server than they are on your computer, then you will need to configure the relative path manually to ensure that the image appears on your page. This will be much easier if you understand basic HTML.

To insert an image that is on a different website then the page

  1. First, ensure that you are entitled to include a link from your site to the intended graphic and that you credit the source appropriately.
  2. Click in the textfield where you want to insert the image code.
  3. Choose Image on Web from the Insert menu. The following window appears:
  4. Type, or copy and paste, the URL into the URL box, change the other settings appropriately (make sure you give the image a height and width).
  5. Click on the Insert button to insert the tag for that image. Note that the image itself does not appear in the textbox, only the tag that tells the browser where to get the image.

Details on the features in these windows

Image file name (local image only)

This is the RELATIVE link to the graphic you have chosen. This path will be used in the IMG SRC tag. The path is created based on the current location of your data file and the graphic file on your hard drive. If the relative path between the Web page and the image on your server is going to be different then the relative path between the two on your hard drive, then you will need to change this as required.

Browse button (local image only)

Use this button to find an image file (.gif or .jpg) on your hard drive.

Image URL (image on web only)

Type or copy and paste the URL of the image you have chosen in here.

Width and height

When you select a graphic, the Width and Height in pixels appear here. These will be used to create the WIDTH= and HEIGHT= properties of the IMG SRC tag. If you want to display the graphic at a different size, you can change these numbers.

Keep Aspect Ratio (local image only)

If this box is checked, then if you change the value in either the width or height boxes, the other is adjusted automatically when you click in it so that the ratio of the width to height remains the same. If this box is not checked, then you may change the shape of the image by changing the numbers in the width and height boxes.

Align

Here you can choose how you would like to align the picture on the Web page. This will control the ALIGN= property of the IMG SRC tag.

Alt text

This is the text that will be shown on the Web page if a browser is configured NOT to display images, or while the image is downloading. By default, the image file name is placed here, but you will probably want to change it to something more descriptive.

Image (only in local image window)

The graphic (JPG or GIF) that you have chosen to insert in the Web page will appear here.

Insert button

Once you have chosen the graphic you want, you can press OK to insert the appropriate code for the image into the Hot Potato text box.

Target

This specifies where the page linked to will appear. You can type anything you want into here, or you can choose from these items in the drop-down list:

_blank will make the file appear in a new window, leaving the exercise intact in the old window.

_self will make the file replace the exercise. In the case of V3 output, this will leave the top (feedback) frame intact.

_parent will replace the frameset containing the exercise. In the case of a V3 output file, this will replace the entire exercise.

_top will replace the entire frameset, so if your exercise is inside a larger frameset, then the whole thing will be replaced by the new file.

If you find this confusing, then the best option is probably _blank; if you choose this, then you can be sure the exercise (and the student's work) will not be lost. If you know HTML, you can also type in the names of any of the frames in your document -- FeedbackFrame, for example, would cause the file to display in the top (feedback) frame of a V3 exercise.

Link text

This is the text that will become the link on your Web page. You might want to use a graphic as the link, so there is a button below the text box to enable you to choose a picture. If you selected text before choosing Insert / Link, then the selected text will appear here.

List of Topics