The prototype application was implemented to be user friendly, accurate , clear and informative as much as possible. If a user moves the cursor on any of the label, the description panel will automatically show the detailed description of that part. In addition to that the image panel will show a more detailed picture of that part (this picture can be in any format). The idea is to provide more detailed information of any body part.

The user will have an option of zooming in and out through the scroll bar provided. The user will be shown more labels (Level Of Detail) as he zooms in. The idea is to watch the medical diagrams just like an interactive map where the user has a total control over his views. The system will react to the selections made by the user to make the appearence less cumbersome.

Summary of basic functionalities are :-

In order to trigger the execution of javascripts one can use event handler attributes. These event handler attributes are compatible with SVG. Examples are onmouseover, onmouseout, onmousemove, onclick and onload. The below SVG-code shows use of mouseover and onclick events.

<text transform="matrix(1 0 0 1 401.2803 562.5708)" font-family="'Arial'" font-size="13" onmouseover="show_description('V11')">Femoral vein</text>
<text fill="pink" x="670" y="400" onclick="change_layer('show','veins')">Show Veins</text>		  
          

In order to change SVG-elements per javascript one needs to first reference them. This was done using the DOM-tree and DOM methods like document.getElementById(). Below code sample shows the use of of DOM for manipulating elements.

var svgobj = document.getElementById(element_name);
if(action=="show")
{
svgobj.setAttributeNS(null,'visibility','visible');
}
else if(action=="hide")
{
svgobj.setAttributeNS(null,'visibility','hidden');
var textNodebase = document.getElementById("test");
if(textNodebase!=null)
{
textNodebase.parentNode.removeChild(textNodebase);
}          

The ECMAScript function (textFlow) has been used to create flow text. A text node, maximal width of the text block and dy values as to be specified. The script creates tspan elements [7] as needed and does automatic line breaks onec a line is full. Below code snippet shows its use:

var textNodeCentered = document.createElementNS(svgNS,"text");
	
var svgobj = document.getElementById("vein");
				
textNodeCentered.setAttributeNS(null,"id","test");
			
textNodeCentered.setAttributeNS(null,"x",750);
			
textNodeCentered.setAttributeNS(null,"y",65);
					
textNodeCentered.setAttributeNS(null,"font-size",18);
			
textNodeCentered.setAttributeNS(null,"font-family","Arial,Helvetica");
				
textNodeCentered.setAttributeNS(null,"text-anchor","middle");
		
document.documentElement.appendChild(textNodeCentered);
					
var dy = textFlow(myFlowText,textNodeCentered,300,750,15,false);