The HTML is the means to display the image on a browser. The general format of just about any HTML file is as follows
Within the body of the HTML page we want to construct a 'table' which looks remarkably like the one we've drawn.
A table in HTML lies between <table> and </table> constructs. A series of rows may be specified using <tr> and </tr> (tr stands for 'table row'). Within each row are table data elements (<td> and </td>) which is where we will put each of our fragmented images. Each of these HTML commands can have 'attributes' which specify certain characteristics. Fortunately we don't need many, and the shape of the table is determined by the image sizes themselves. So the table declaration for the entire image we have:
<table align=center border=0 cellpadding=0 cellspacing=0>
The border, cellpadding and cellspacing attributes just specify that there
should be no gaps between the data elements. Within the table we lay down the
rows, however many there are (3 in our example). So the first 'top' row is:
<td colspan=10><img src="images/top.jpg"></td> </tr>
The <td> command has a 'colspan' attribute. This says that the element spans 10 columns (i.e. all of them). This is because this is a static segment and is as wide as the entire image. Between the <td> and </td> commands is an <img> command. This is the command which loads in the image we want in this data element of the table. It too has attributes. The src attribute gives the file name of the image. In the example it is a relative reference, but it could also be a URL. All the static images are specified this way.
The dynamic images are a little more complex
<td><img name="dl" src="images/display_left.jpg"></td>
<td><img name="d4" src="images/lcdoff.jpg"></td>
<td><img name="d3" src="images/lcdoff.jpg"></td>
<td><img name="dr" src="images/display_right.jpg"></td>
Any switches are done in a similar way, but it is extremely unlikely that your switches exactly line up with the boundaries of your display. So the row is initially treated as static (a single
Having done all this for all the table elements, and with the table within the body of an HTML file you should be able to open it with a browser and see your composite image displayed. If there are any gaps or missing segments or distorted images, go through and check your dimension numbers and file name references.
To get input from the user, mouse clicks or keyboard entry needs to be detected. For the mouse we will need to define areas on the images which correspond to keys or switches on the calculator. This is done with a <map> command.
In the above fragment a map called keymap is defined. In it an area is defined
later). The coordinates specified in the area command are relative to an image, where
the origin starts at the top left of the image. We associate this map with an
image in the table as shown in an example below:
<tr><td colspan=10><img src="images/keys.jpg" border=0 usemap="#keymap"></td></tr>
Below is an image constructed in this way. Try hovering the mouse over the various keys. If you have a status bar showing in your browser, note what it indicates when you're over a key.
If we want to have keyboard input as well as mouse selection, then another attribute is defined; this time for the HTML body command:
"How to write a calculator simulator"
<- Prev Page Next Page->