Se kilde til Media Types - Military Ribbons

<font color=gray><div align="center" style="text-align: center;font-size: 300%; font-weight: bold; margin: 10px auto;"> '' Military Service Ribbons '' </div></font>

The following are the steps I used to add Military Ribbons to my veterans pages


{|

[[Image:military_ribbons_media_type.jpg|thumb|400px|Military Ribbons media type]]
|


1 - Create new '''Military Ribbons''' media type

The image on the right shows how I setup the Military Ribbons media type (rack collection) on my site

See [[Media Types - Adding new]] for step by step instructions.

|}



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.


4 - Copy generated <map from 

<pre>
<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')" />
</map>

</pre>
>> 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

<pre>
<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')" />
</pre>

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'''

<pre>
#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);
}

</pre>

* mod to showmedia.php in order to display the tooltip dynamically
* javascript file