SVG Maps for People with Visual Impairment - Appendix

JavaScript Functions

The Click, Mouseover, Mouseout, and NameCleanup functions were adapted from [Adobe Developer Pages].

Click Event Handler

Extract and format the name of the clicked element for the screen reader.

    function OnClickEvent(evt)
    {
      var clicked_name = "";
      var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
      if (doc != null)
      {
        clicked_name = evt.getTarget().id;
     /* Fix the name, replacing Illustrator codes.  */
        clicked_name = nameCleanup(clicked_name);
        showName(clicked_name);
      }
    }

Mouseover Event Handler

Extract and format the name of the moused over element.


    function OnMouseover(evt, effect)
    {
      var mouseover_name = "";
      var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
      if (doc != null)
      {
        mouseover_name = evt.getTarget().id;
     /* Fix the name, replacing Illustrator codes.  */
        mouseover_name = nameCleanup(mouseover_name);
        doHaptic(effect, mouseover_name);  
      }
    }

Mouseout Event Handler

Extract and format the name of the moused out element.

    function OnMouseout(evt, effect)
    {
      var mouseout_name = "";
      var doc = evt.getTarget() != null ? evt.getTarget().getOwnerDocument() : null;
      if (doc != null)
      {
        mouseout_name = evt.getTarget().id;
     /* Fix the name, replacing Illustrator codes.  */
        mouseout_name = nameCleanup(mouseout_name);
        stopHaptic(effect);
      }
    }

Name Cleanup

Replace Unicodes inserted by Illustrator with space, &, ',_.
inserted space string, _x0020_, into spaces,
inserted ampersand string, _x0026_, into ampersand,
inserted apostrophe string, _x0027_, into apostrophe,
inserted underscore string, _x005F_, into underscore.
Remove any underscore, digit, underscore, _1_, from end of path IDs.
Replace any remaining lone underscores with spaces.


    function nameCleanup(stringIn) {
      var result = "";
      var temp = stringIn;
      temp = temp.replace(/\_x0020\_/g, " ");
      temp = temp.replace(/\_x0026\_/g, " & ");
      temp = temp.replace(/\_x0027\_/g, "'");
      temp = temp.replace(/\_x005F\_/g, "_");
      temp = temp.replace(/\_\d+\_$/, "");
      temp = temp.replace(/\_/g, " ");
      result = temp;
      return result;
    }

Show Name

Receive the name of the clicked element in the svg image and print it to a text area named "text1" on an html page.


function showName(clicked_name){
    if (document.getElementById){
        // Standards Compliant code fork...
        var doc=this.document;
        doc.forms["form1"].text1.value="";
        doc.forms["form1"].text1.value=clicked_name;
        doc.forms["form1"].text1.focus();
    }
    else if (document.all) {
	// Microsoft Internet Explorer 4/5 code fork...
        var doc=this.document;
	if (doc.all("textLayer")) 
        {
          doc.forms["form1"].text1.value="";
          doc.forms["form1"].text1.value=clicked_name;
          doc.forms["form1"].text1.focus();
	}
    }
    else if (document.layers) {  
	// Netscape Navigator 4.x code fork...}
    var doc=self.document;
        if (doc.forms["form1"]) {
            doc.forms["form1"].text1.value="";
            doc.forms["form1"].text1.value=clicked_name;
            doc.forms["form1"].text1.focus();
        }
    }
}

Haptic Effects

MVI haptic effects routines [Immersion Corporation Developer Pages] for the Logitech iFeel mouse.


var imm_eref;
var refreshFreq;
function IMM_openIFR()
{
imm_eref = document.ImmWeb.OpenForceResource("../scripts/haptics.ifr");
}
function doHaptic(effect, feature_name)
{
    document.ImmWeb.StartEffect("Pulse", imm_eref);
    document.ImmWeb.StartEffect(effect, imm_eref);
    IMM_setMsg(feature_name);
}
function stopHaptic(effect)
{
    // We want the pulse on crossing out of a boundary as well.
    document.ImmWeb.StartEffect("Pulse", imm_eref);
    document.ImmWeb.StopEffect(effect, imm_eref);
}

Update Status Bar

Write the name of the feature that has focus into the status bar.


function IMM_setMsg(feature_name)
{
//    window.status = feature_name;
    window.setTimeout('window.status="' + feature_name + '"', 1);
    return true;
}
function refreshStatus() {
    refreshFreq=setInterval("IMM_setMsg(feature_name)", 10);
}