HTML Tutorial, Part 2

This tutorial will teach you how to put images into your web page, and how to make those images into clickable image maps. The first step is to make your image. Many of you have already made very good images for you homework assignments. One thing you should note is that the type font should be 16 point or greater or else your image may be difficult to read.

The next step is to scan in your image using a scanner. Scanners are available at Vogelback and at the library. You probably do not know how to scan in a document--that's okay, because the staff at the computer lab will help you. Basically, you will scan it in using Ofoto, and then make it look nice (e.g., adjust the shading) and save it as a JPEG document (GIF documents also work) using Photoshop. Once you have scanned it in, you can see what it will look like by opening your JPEG in Netscape as a file (in Netscape, at the menu at top, under File, go to Open File).

How to Put a JPEG Image into Your Document

The first sample HTML document can be found on the web at the following URL: http://galton.psych.northwestern.edu/acton.html. This is my personal home page. The image called acton.JPEG (a photograph) has been put into this page using the following statement: <img src=http://galton.psych.northwestern.edu/acton/personal/acton.JPEG align=right>. This statement starts out by saying "image source," then it tells the location (URL) of the JPEG image (Acton.JPEG is in the folder personal, which is in the folder acton, which is on the server galton.psych.northwestern.edu), then it tells the computer to align the image on the far right of the screen (it could have said left or center).

How to Make Your JPEG Image into an Image Map

So you have an image and you want the user to be able to click on part of it to jump to a page that elaborates on that topic. This can be done using an image map. An image map is comprised of two parts: an image, and a map. The map overlays the image and cuts it up into sections on which the user can click to jump to different pages.

In order to make an image map, you have to be logged into the server--our server is called Galton--you cannot make an image map on a different computer, such as your home computer, using the code I am going to give you (although you can log on from any computer on campus). If you want to see an example image map, go to the following address (URL): http://personality-project.org/greatideas/psychoanalysis.html. The code that calls this image map, found in the second sample HTML document, is as follows: <a href=/mapserve.acgi$greatideas/psychoanalysis/Grunbaum.map><img align=left border=0 src=psychoanalysis/Grunbaum.JPEG ismap></a>

This code may look intimidating, but perhaps it will be less so when broken into its component parts. The first part calls the map, and the next part calls the image. First, <a href=...></a> should look familiar--it is the code for creating any hypertext link (or "jump"). Second, /mapserve.acgi$ is the code for calling a Common Gateway Interface (CGI), which allows the image map to work. I won't go into the technical details--suffice it to say that you must include this code verbatim. Third, greatideas/psychoanalysis/Grunbaum.map is the address of your map. This says that Grunbaum.map (the map) is located inside file psychoanalysis, which is inside file GreatIdeas. (It automatically knows that file greatideas is located on the server galton.psych.northwestern.edu, because you are working on this server.)

The code for the image starts out, naturally enough, with <img.... Second, it tells the computer where to put the image--on the left--using align=left. Third, it says border=0. Without this, a blue border will appear around the image; aesthetically it is probably better to get rid of the border using this command. Fourth, it tells the computer the location (or "source") of the image using src="psychoanalysis/Grunbaum.JPEG". This says that the image Grunbaum.JPEG is located inside file psychoanalysis. Now the computer knows automatically that file psychoanalysis is located inside file GreatIdeas, because the document (http://personality-project.org/greatideas/psychoanalysis.html) inside which the command that calls the image is located is itself inside the file GreatIdeas. This psychoanalysis/Grunbaum.JPEG is called a relative address--an abbreviated address that leaves out the beginning because the beginning is the same in both the file that is called and the file that did the calling. The absolute address, which works just as well, is http://personality-project.org/greatideas/psychoanalysis/Grunbaum.JPEG. Notice that the end is the same in both cases. Relative addresses are very useful timesaving devices that keep you from having to type the whole address, and they work not only for images, but for any hypertext link (<a href=...></a>). Finally, ismap tells the computer that this is an image map.

Remember that an image map is comprised of both an image and a map. The image is what you scanned in. We just discussed the code that calls the image map. Now we still need to create the map. This part is straightforward, although time consuming. Take a look at the sample map, which is called Grunbaum.map, and is located at the address http://personality-project.org/greatideas/psychoanalysis/Grunbaum.map. The first statement is default /greatideas/psychoanalysis.html. This statement tells the computer that if users click on any part of the image map that is not prespecified to jump somewhere else, then they will automatically jump to the default document greatideas/psychoanalysis.html. (Again, this is a relative address that means the same as the absolute address http://personality-project.org/greatideas/psychoanalysis.html. Note the slash at the beginning that indicates that file greatideas is on the same server, galton.psych.northwestern.edu, as the calling document.)

The second statement in the map is poly /greatideas/psychoanalysis/generalizations.html 0,0 0,48 388,48 388,0 0,0. This stands for polygon, and has two parts. First, /GreatIdeas/psychoanalysis/generalizations.html is the relative address of the document generalizations.html. This is the document that users will jump to if they click anywhere between the map coordinates 0,0 0,48 388,48 388,0 0,0. Where do these coordinates come from? Well, by now you have the image up on screen in Netscape, right?--it is part of the calling document. In my case, I would be looking at the document http://personality-project.org/greatideas/psychoanalysis.html on screen. Now, using the mouse, place the cursor over the image, and look at the bottom of the screen. At the far right of the bottom of the screen you should see two little numbers--these are the coordinates over which the cursor has been placed. If you move the cursor, the coordinates will change. To create the sample map, I moved the cursor to the top left of the image, and found, by looking at the bottom of the screen, that the coordinates for this location were 0,0. Then I moved down below the part that says "Universal Generalizations" and found that the coordinates were 0,48. Then I moved all the way to the right and found that the coordinates were 388,48. Then I moved up to 388,0, and back to the beginning, at 0,0. What I have done is create a big rectangle. If users click anywhere inside this rectangle, they will jump to another page, namely generalization.html, that explains about universal generalizations in psychoanalysis. You can see that I have done the same thing over and over again, for constructions.html, slips.html, interpretations.html, etc. Of course, to jump to these pages I already have to have created the pages, which are simply HTML documents elaborating on different aspects of psychoanalytic theory.

So now you know how to include images and image maps in your web project. Hopefully it will be easygoing from here, but I am always here to help you if you need me.


Back to Web Design

Back to the Great Ideas in Personality Home Page