Insert a Picture into Your Webpage

Blogs

From time to time I will be adding items to these pages giving details of how to achieve certain objectives, usually related to genealogy and the use of Legacy software, often in conjunction with other software.

I am not suggesting that the solutions offered are the only, or indeed the best, options to solving problems but simply that they are ways which I have found to work.

* 'V' indicates a video is available

  1. Using Legacy Search V
  2. Search Events, Locations and Married Names V
  3. Create an Ancestry Book
  4. Map with Google Earth
  5. History of British Prime Ministers - Timeline
  6. British Civil Registration
  7. The Murder of Adam Mather
  8. Improve Photo Colour Balance
  9. Transparency with The Gimp
  10. Masking with The Gimp
  11. Web Safe Colours
  12. Create Legacy Web Pages - Part 1
  13. Create Legacy Web Pages - Part 2
  14. Create Legacy Web Pages - Part 3
  15. Using LTools Tidy Legacy HTML
  16. Insert Pictures into Web Pages
  17. Insert RSS Feed into Web Pages
  18. Getting Online
  19. Protect Your PC
  20. Open Legacy files with Open Office V
  21. FamGenContacts Database
  22. Create Direct Line Ancestor Tree
Legacy Users Subscribe to Web Users Group
Powered by
uk.groups.yahoo.com

The icons below are links to any other software mentioned.

  • Legacy
  • The Gimp
  • Xara 3D

Click to Open
Open the Box !!

Expand One's Sights

One of the problems with including pictures into web pages is that they tend to be either too small or too large. There are various ways round this, but for the puposes of this blog I have chosen to use Javascripted expanding thumbnails enclosed within tables.

I am aware that these days using tables is not considered "modern" but they do fit in with pages created using the Legacy Genealogy Software and are easy to use.

Although not all of the pictures on this page are in tables, they all expand on clicking - see what's in the box above.

If you did look then you will have seen that the new screen opens in a full size window. Whilst it is possible to fit the frame to the picture I am keeping this simple so will not be going into that aspect.

Instead I am going to concentrate on the basic html/javascript coding to enable positioning and display.

The html file of a web page can be opened by right clicking the file and selecting "Open With" and then NotePad (or any text editor). This coding can be edited in NotePad but must be saved as ".php" or ".htm". Normally just clicking "Save" will be enough though.

A Simple Table

I am too small. Click me!

A table can easily be positioned to the left, at the centre and to the right of a page. You can see here that the text, which is actually written below the table, floats up to the top left. This it does automatically. If the table were to be positioned on the left then the text would float to the top right, but if it is central then the text would be below.

So, how do we code this? A table has a specified html format, a simple version being:

      <table>
      <tr>
      <td>
      
      This is where the expanding picture goes
      
      </td>
      </tr>
      </table>
    

By default the table will align itself to the left of the page and if we want it elsewhere we need to say so. This is done by changing the table tag to read: <table align="right"> or <table align="center"> fellow Brits please note: "center" is correct!

Whilst this places the table where we want it, the contents within the table will, by default, align themselves to the left edge of the table. Normally this will only show when a footer is given to the picture. The correction is to change the <td> tag to <td align="center">

The Javascript

What we are now going to do is to create a function which will take information from the script where the picture is. Normally this function would be placed in the header ie. before the </head> tag, but for Legacy users it is more convenient to add it in the Legacy program, as the first line in the box "include a custom HTML header on each page" (and don't forget the check box on the left!). This is situated in the Internet>Create Web Pages>Links tab. This puts the script on every web page - so it will never need doing again! However, if LTools Tidy Legacy HTML is used then it can be added to the header; see my tutorial for details.
The script is:

<script language="javascript" type="text/javascript">function newWindow(biggergif) {biggerWindow = window.open(biggergif, "biggerWin");biggerWindow.focus()}</script>


Please note that so that this script can be copied and pasted I have created it on one line (which I would not normally do). Do not split into separate lines as it could break.

Let's Put it Together!

What is it?
Puzzle it out!

Now that we have the function we only need to put into the table the link from the images to the function. I put my pictures in a folder contained in the same folder as the page. That is to say that the picture folder for this page is in the same folder as this page. If you have a different arrangement then the path to the pictures will need changing.

The script template for all the above pictures is:


<a href="javascript:newWindow('picture_folder_name/big_picture_name.gif')">
<img src="./picture_folder_name/thumbnail_name.gif" width="100" height="91" border="0" alt="Puzzle it out!"></a>


Again, this can be copied/pasted and just the names and thumbnail sizes changed.

The thumbnail picture sizes are in pixels and it is suggested that the longest side of the large picture should be not more than 500 pixels (I have used around 320 pixels for this exercise, except for the kitchen table which is smaller).

Putting the picture code inside the table gives us:

<table align="center"> <tr> <td align="center"> <a href="javascript:newWindow('picture_folder_name/big_picture_name.gif')"> <img src="./picture_folder_name/thumbnail_name.gif" width="100" height="91" border="0" alt="Puzzle it out!"></a> <br>title goes here </td> </tr> </table>

All this can be copied/pasted, although I recommend that you copy from the print friendly version. Where this is placed on the page depends on your artistic judgement. Decide roughly where you want the picture to be and place the coding there. The odds are that it will not be right the first time and, until you are used to placing it, you may well split other things. Do not worry about this, just undo/delete and try again. One final thought, it is better to have two pictures, the large and a thumbnail rather than just one.

Enjoy!

Printer friendly version: Printer

Corrections, comments and suggestions are welcome, so please use the contact facility below.


The above information is given without warranty either expressed or implied

The content last updated 30 June 2010