TNG image map to an external web page

From TNG_Wiki
Jump to: navigation, search


Introduction

General information regarding the "image map" function in TNG

Purpose

To illustrate how to use the image map function beyond embedding links to people ... but also to external web pages that related to the events photo or document

Document of interest

Education Event document

For this example I will be focusing in on an media item (document) about a small country school that this person attended. I have an external article started about the school in a MediaWiki install.

link purpose

There are several names in this "Souvenir for the school year" that I can embed image mapped hyperlinks into the document. The names are easily embedded following the instructions provided by the TNG page.

In my case I wish to jump out to another article that is focused in on the place "Bald Hill School".

link location

I will be placing a link in the area of the school name

Note: It must have been an interesting school... since "shool" is misspelled

Step by Step instructions

20080627200236 cr.jpg While viewing the media... click on "» Edit Media"

Edit Media

Assuming you have completed the other area's (i.e. Media File; Media Information; Media Links; and Place Taken/Created) ...you can scroll down to the Image Map area

http://www.bgaugler.com/genealogy/wiki/images/3/3c/20080627203050.jpg

for marking up a document...I like using the "rectangle" shape for selecting a region

Find Person id

  • When asked to supply a person id... just put any persons id number in the field
  • Note: It does not matter what "person id" you use because you are going to remove it anyway.

code

  • The first area of interest is the highlighted area
  • The highlighted area is what you will replace with the target web link
  • actual textNote:the green text is the text you are going to replace

<area coords="72,875,54,848" href="getperson.php?personID=I210&tree=" alt="John Henry BUCK, Sr" title="John Henry BUCK, Sr">

My new web link is http://www.bgaugler.com/genealogy/wiki/index.php?title=Bald_Hill_School

next

  • The last area of interest is the two highlighted area's for titles
  • The highlighted area is what you will replace with your new title
  • actual text

<area coords="72,875,54,848" href="getperson.php?personID=I210&tree=" alt="John Henry BUCK, Sr" title="John Henry BUCK, Sr">

  • My new titles are Bald Hill School:familypedia article

Results

300px-20080627210322.jpg

http://www.bgaugler.com/genealogy/showmedia.php?mediaID=2328&medialinkID=2870

300px-20080627210721.jpg

http://www.bgaugler.com/genealogy/wiki/index.php?title=Bald_Hill_School

Related links

Media Overview
Setup - Media

Using Collections

Adding Media

Body Text

Thumbnails

Image Maps

Other Useful Articles

Some TNG Media Mods