Media Types - Military Ribbons
The following are the steps I used to add Military Ribbons to my veterans pages
|
2 - Generate the Military Ribbon rack at Ultimate Rack http://ultimaterack.ajandj.com/
- See my step by step instructions in UltimateRack
3 - Add created Military Ribbon rack image to your Media >> Military Ribbons collection.
- See my step by step instructions in Media - Add New
4 - Copy generated <map from
<map name="rack" id="rack"> <area shape="rect" coords="214,32,319,62" href="#" onMouseout="hideTip()" onMouseover="doTooltip(event,'World War II Victory Medal')" /> <area shape="rect" coords="107,32,212,62" href="#" onMouseout="hideTip()" onMouseover="doTooltip(event,'European-African-Middle Eastern Campaign Medal')" /> <area shape="rect" coords="0,32,105,62" href="#" onMouseout="hideTip()" onMouseover="doTooltip(event,'American Campaign Medal')" /> <area shape="rect" coords="107,0,212,30" href="#" onMouseout="hideTip()" onMouseover="doTooltip(event,'Purple Heart')" />
- >> eliminate the <map and </map statements
- and replace
- href="#" onMouseout="hideTip()" onMouseover="doTooltip(event,
- with
- nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('
- then replace
- ')
- with
- ','lightgreen')
- or
- ','lightblue')
- to alternate the color of the popup box,
- so the end result is
<area shape="rect" coords="214,32,319,62" nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('World War II Victory Medal','lightgreen')" /> <area shape="rect" coords="107,32,212,62" nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('European-African-Middle Eastern Campaign Medal','lightblue')" /> <area shape="rect" coords="0,32,105,62" nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('American Campaign Medal','lightgreen')" /> <area shape="rect" coords="107,0,212,30" nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('Purple Heart','lightblue')" />
5 - Copy and Paste the edited <area map to the TNG Image Map section of your added Military Ribbons record.
6 - link the Military Ribbon created to the person ID and Military Service event for the veteran
Required Style and Mod
The Military Ribbons display using the Cool Dynamic Tooltip requires the following
- class addition to your mytngstyle.css
#dhtmltooltip{ position: absolute; width: 150px; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; /*Remove below line to remove shadow. Below line should always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); }
- Tooltip Mod to showmedia.php in order to display the tooltip dynamically
- Tooltip_Mod#ddrivetip.js javascript file
Related Links
Media Overview
Setup - Media
Using Collections
- Media - Collections
- External Link Collection
- Media - Add New - Collection
- Media - Add New - Collection (Military Ribbons example)
Adding Media
- Getting Media into TNG - A summary of the various techniques.
- Add New Media - Linked to Person or Family - For Editors as well as Administrators
- Media - Add New - Import one multimedia file into TNG. Then link its new Media record to other objects.
- Histories - Creating - Create a new TNG Media record without importing a multimedia file into TNG.
- Media - Import - Import files that are already on the server, but not already defined as Media records.
- Media - Upload - Upload several media files, import them into TNG, and link them (individually or collectively) to other objects.
- Import Media Using GEDCOM - Upload new media files that are referenced inside of a uploaded GEDCOM file.
Body Text
- Editing Body Text & Body Text with Image an example of adding Body Text to an image
Thumbnails
- Media - Default Images on how to create default images
- Media - Thumbnails - Moving
Image Maps
TNG version: | ≤ 12.3.0 |
TNG version: | ≥ 7.0 |
Information on Image Maps apply to TNG versions prior to TNG 13
Image Tags
TNG version: | ≥ 13.0.0 |
Information on Image Tags apply to TNG v13 and later
Other Useful Articles
- Batch updates of IPTC tags using IrfanView
- Folios on how to handle multi-page documents as if it were a single TNG media object
- Folios - Examples
- Media Functions on how to hook videos into TNG
- Preserving Digital Photos