Difference between revisions of "Media Types - Military Ribbons"
Line 51: | Line 51: | ||
with | with | ||
− | ''' | + | |
− | nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('''' | + | '''nohref onmouseout="hideddrivetip()" onmouseover="ddrivetip('''' |
then replace | then replace |
Revision as of 10:19, 16 July 2008
The following are the steps I used to add Military Ribbons to my veterans pages
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
<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>
>> 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); }
- mod to showmedia.php in order to display the tooltip dynamically
- javascript file