MouseOver in Netscape from Kristina Seyer Smith on 2001-01-16 (w3c-wai-ig@w3.org from January to March 2001)

From: Kristina Seyer Smith <kristina@bonair.Stanford.EDU>
Date: Mon, 15 Jan 2001 18:18:13 -0800
To: jonathan chetwynd <jc@signbrowser.org.uk>
Cc: <w3c-wai-ig@w3.org>, roller@nebulus.org, kristina@bonair.Stanford.EDU, rtaketa@sjsu.edu
Message-Id: <4.2.0.58.20010115172202.00a20920@bonair.stanford.edu>
Jonathan,

Here's the HTML for the map prototype project I developed for the 
California School for the Blind.

First, credit where credit is due. I found the code for the mouse-over on 
the web, written by : Pat Friedl of Nebulus Designs, and used it for my 
class project, giving them credit in the code. Please do the same and 
follow their guidelines for use.

Not knowing how many people will receive this message, I will forward to 
you only, the background map (a GIF) and one *.WAV file so you can test 
this. If others want these also, just let me know.

The code is enclosed below.  The map of the School was scanned, and then 
traced in Adobe Illustrator, and I embedded the URL's that called the WAV 
files as "Attributes" of each illustrator object. Then I used Adobe 
Illustrator to create the image map automatically, manually pasting the 
resulting HTML into this script.  Alternatively, one could use a Geographic 
Information Systems (GIS) application like ESRI's ArcView or MapInfo to 
develop an intelligent map that links dynamically with a database 
containing various information or sound files, then output a JPEG 
file.  Or, use web-mapping technology such as ESRI's ArcIMS, Intergraph's 
GeoMedia, or Autodesk's MapGuide to interact with the maps and information 
dynamically. (Some vendor apps are now available without plugins, and some 
vendors are embedding W3C standards including SVG and PNG.

There were a few problems with using Mouse roll-overs that I found during 
my study:
1) Image-maps are rectangular while your map, or the objects in your image 
may not be.  This causes the WAV file to sound while the mouse is not 
directly over the correct object.  Vector graphics (as in SVG) would 
resolve this.
2) While the mouse is traveling to an object at the innermost portion of 
your image, the program may speak the WAV files for outermost 
objects.  Usually it will cut off, and speak the innermost WAV, but there 
might be a delay.  Also, the program may continue to speak the WAV file you 
passed over, even though the mouse has moved off of the feature.
3) The third issue, I was not able to explore during my project, but came 
up during my discussion with folks at the CA School for the Blind.  How are 
standard screen-readers for the blind configured to deal with mouse 
roll-overs, while they are also dealing with ALT text from the main 
graphic?   Perhaps there are some members of http://www.w3.org/Voice/ who 
might be able to respond.

I would love any feedback from W3C-WAI members on these items.

Here's to accessible web-mapping!

Regards,
Kristina


<html>

<HEAD>
         <script language=javascript>
<!-- // hide script from old browsers

//HTML created & Script modified by Kristina Seyer Smith
// 5-21-00

//Original Javascript Code for rollovers and sound obtained from:
// Roller JavaScript Coder
// written by:
// Pat Friedl of Nebulus Designs
// http://nebulus.org
// This script is (C) 1999
// and is free for non-profit use. This script may not be
// sold or reditributed without express permission of Nebulus Designs.
// For questions, email roller@nebulus.org


// Sound Compatability Check

bVer = parseInt(navigator.appVersion);
loadSound = false;

if(bVer >= 4 && navigator.javaEnabled()) {;
   loadSound = true;
}

// Error Handling Code;

function errorHandler() {;
   return true;
}

window.onerror = errorHandler;

// Sound Function

function soundPlay(sndAction, sndObj) {
   if(loadSound) {
     if(navigator.appName == 'Netscape'){
       eval('document.' + sndObj + ((sndAction == 'stop')? '.stop()' : 
'.play(false)'));
     } else {
       eval('document.' + sndObj + ((sndAction == 'stop')? '.stop()' : 
'.run()'));
     }
   }
}

// end hiding script -->
</script>

</HEAD>


<body>
<BODY onLoad="soundPlay('play','rollSoundWelcome');window.status='status msg';
return true;" >
<map name="173final">
<area shape="rect" coords="545,4,708,59" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="4,166,86,254" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="81,149,140,228" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="131,131,191,209" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="180,115,240,192" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="229,99,290,174" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="280,82,335,158" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="329,47,439,140" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >
<area shape="rect" coords="436,11,545,101" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalnut');window.status='status msg';
return true;" >

<area shape="rect" coords="610,69,624,85" href="#null" 
onMouseOver="soundPlay('play','rollSoundNorth');window.status='status msg';
return true;" >

<area shape="rect" coords="117,314,123,319" href="#null" 
onMouseOver="soundPlay('play','rollSoundAC28BART');window.status='status msg';
return true;" >

<area shape="rect" coords="275,394,290,410"  href="#null" 
onMouseOver="soundPlay('play','rollSoundPrincipal');window.status='status msg';
return true;" >
<area shape="rect" coords="366,320,371,324" href="#null" 
onMouseOver="soundPlay('play','rollSoundEntrance');window.status='status msg';
return true;" >
<area shape="rect" coords="352,325,358,329" href="#null" 
onMouseOver="soundPlay('play','rollSoundEntrance');window.status='status msg';
return true;" >
<area shape="rect" coords="309,339,314,342" href="#null" 
onMouseOver="soundPlay('play','rollSoundEntrance');window.status='status msg';
return true;" >
<area shape="rect" coords="309,349,314,354" href="#null" 
onMouseOver="soundPlay('play','rollSoundSteps');window.status='status msg';
return true;" >
<area shape="rect" coords="300,336,304,341" href="#null" 
onMouseOver="soundPlay('play','rollSoundSteps');window.status='status msg';
return true;" >
<area shape="rect" coords="386,235,407,247" href="#null" 
onMouseOver="soundPlay('play','rollSoundPool');window.status='status msg';
return true;" >
<area shape="rect" coords="343,229,379,241" href="#null" 
onMouseOver="soundPlay('play','rollSoundTheatre');window.status='status msg';
return true;" >
<area shape="rect" coords="117,314,123,319" href="#null" 
onMouseOver="soundPlay('play','rollSoundAc28-Bus');window.status='status msg';
return true;" >
<area shape="rect" coords="294,229,299,234" href="#null" 
onMouseOver="soundPlay('play','rollSoundAC23');window.status='status msg';
return true;" >
<area shape="rect" coords="331,482,337,488" href="#null" 
onMouseOver="soundPlay('play','rollSoundSchoolBus');window.status='status msg';
return true;" >
<area shape="rect" coords="231,464,391,537" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window.status='status msg';
return true;" >
<area shape="rect" coords="275,394,290,410" href="#null" 
onMouseOver="soundPlay('play','rollSoundPrincipal');window.status='status msg';
return true;" >
<area shape="rect" coords="283,340,313,361" href="#null" 
onMouseOver="soundPlay('play','rollSoundGrass');window.status='status msg';
return true;" >
<area shape="rect" coords="284,351,311,371" href="#null" 
onMouseOver="soundPlay('play','rollSoundGrass');window.status='status msg';
return true;" >
<area shape="rect" coords="262,251,301,281" href="#null" 
onMouseOver="soundPlay('play','rollSoundGrass');window.status='status msg';
return true;" >
<area shape="rect" coords="374,286,413,329" href="#null" 
onMouseOver="soundPlay('play','rollSoundGrass');window.status='status msg';
return true;" >
<area shape="rect" coords="370,297,411,340" href="#null" 
onMouseOver="soundPlay('play','rollSoundGrass');window.status='status msg';
return true;" >
<area shape="rect" coords="430,167,470,210" href="#null" 
onMouseOver="soundPlay('play','rollSoundPlayArea');window.status='status msg';
return true;" >
<area shape="rect" coords="456,277,488,308" href="#null" 
onMouseOver="soundPlay('play','rollSoundPlayArea');window.status='status msg';
return true;" >
<area shape="rect" coords="152,393,215,527" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window.status='status msg';
return true;" >
<area shape="rect" coords="158,273,260,325" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window.status='status msg';
return true;" >
<area shape="rect" coords="205,316,271,371" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window.status='status msg';
return true;" >
<area shape="rect" coords="163,325,232,450" href="#null" 
onMouseOver="soundPlay('play','rollSoundDiag');window.status='status msg';
return true;" >
<area shape="rect" coords="303,306,354,365" href="#null" 
onMouseOver="soundPlay('play','rollSoundLibrary');window.status='status msg';
return true;" >
<area shape="rect" coords="345,297,382,348" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window.status='status msg';
return true;" >
<area shape="rect" coords="253,358,314,476" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window.status='status msg';
return true;" >
<area shape="rect" coords="352,218,389,275" href="#null" 
onMouseOver="soundPlay('play','rollSoundTheatre');window.status='status msg';
return true;" >
<area shape="rect" coords="371,212,427,269" href="#null" 
onMouseOver="soundPlay('play','rollSoundPool');window.status='status msg';
return true;" >
<area shape="rect" coords="402,257,450,302" href="#null" 
onMouseOver="soundPlay('play','rollSoundGym');window.status='status msg';
return true;" >
<area shape="rect" coords="411,288,452,324" href="#Rec-Center" 
onMouseOver="soundPlay('play','rollSoundRecCenter');window.status='status msg';
return true;" >
<area shape="rect" coords="296,355,380,405" href="#null" 
onMouseOver="soundPlay('play','rollSoundAssessment');window.status='status 
msg';
return true;" >
<area shape="rect" coords="378,339,438,394" href="#null" 
onMouseOver="soundPlay('play','rollSoundDinHall');window.status='status msg';
return true;" >
<area shape="rect" coords="521,185,597,270" href="#null" 
onMouseOver="soundPlay('play','rollSoundNorthridge');window.status='status 
msg';
return true;" >
<area shape="rect" coords="483,309,563,385" href="#null" 
onMouseOver="soundPlay('play','rollSoundWestridge');window.status='status msg';
return true;" >
<area shape="rect" coords="582,315,659,400" href="#null" 
onMouseOver="soundPlay('play','rollSoundSouthridge');window.status='status 
msg';
return true;" >
<area shape="rect" coords="658,251,676,274" href="#null" 
onMouseOver="soundPlay('play','rollSoundEastridge');window.status='status msg';
return true;" >
<area shape="rect" coords="619,251,642,268" href="#null" 
onMouseOver="soundPlay('play','rollSoundEastridge');window.status='status msg';
return true;" >
<area shape="rect" coords="641,235,664,252" href="#null" 
onMouseOver="soundPlay('play','rollSoundEastridge');window.status='status msg';
return true;" >
<area shape="rect" coords="619,277,642,295" href="#null" 
onMouseOver="soundPlay('play','rollSoundEastridge');window.status='status msg';
return true;" >
<area shape="rect" coords="644,277,667,295" href="#null" 
onMouseOver="soundPlay('play','rollSoundEastridge');window.status='status msg';
return true;" >
<area shape="rect" coords="372,427,389,452" href="#null" 
onMouseOver="soundPlay('play','rollSoundTransp');window
.status='status msg';return true;" >
<area shape="rect" coords="399,450,413,461" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window
.status='status msg';return true;" >
<area shape="rect" coords="401,458,432,482" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window
.status='status msg';return true;" >
<area shape="rect" coords="222,189,282,233" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window
.status='status msg';return true;" >
<area shape="rect" coords="336,150,396,206" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window
.status='status msg';return true;" >
<area shape="rect" coords="230,467,390,540" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window.status='status msg';
return true;" >
<area shape="rect" coords="151,396,214,530" href="#null" 
onMouseOver="soundPlay('play','rollSoundParking');window.status='status msg';
return true;" >
<area shape="rect" coords="11,3,746,18" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalking');window
.status='status msg';return true;" >
<area shape="rect" coords="0,0,24,612" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalking');window
.status='status msg';return true;" >
<area shape="rect" coords="3,601,737,616" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalking');window
.status='status msg';return true;" >
<area shape="rect" coords="732,3,751,616" href="#null" 
onMouseOver="soundPlay('play','rollSoundWalking');window
.status='status msg';return true;" >
<area shape="rect" coords="264,264,358,318" href="#null" 
onMouseOver="soundPlay('play','rollSoundBuilding');window
.status='status msg';return true;" >

</map>

<img src="173final.gif" usemap="#173final" border=none>

<embed src="./northridge.wav" name="rollSoundNorthridge" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./eastridge.wav" name="rollSoundEastridge" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./southridge.wav" name="rollSoundSouthridge" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./westridge.wav" name="rollSoundWestridge" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./ac23.wav" name="rollSoundAC23" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./ac28-to-bart.wav" name="rollSoundAC28BART" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./assess.wav" name="rollSoundAssessment" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./building.wav" name="rollSoundBuilding" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./diag.wav" name="rollSoundDiag" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./dinhall.wav" name="rollSoundDinHall" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./entrance.wav" name="rollSoundEntrance" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./grass.wav" name="rollSoundGrass" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./gym.wav" name="rollSoundGym" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./library.wav" name="rollSoundLibrary" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./north.wav" name="rollSoundNorth" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./parking.wav" name="rollSoundParking" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./pathway.wav" name="rollSoundPathway" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./playarea.wav" name="rollSoundPlayArea" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./pool.wav" name="rollSoundPool" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./principal.wav" name="rollSoundPrincipal" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./schoolbus.wav" name="rollSoundSchoolBus" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./steps.wav" name="rollSoundSteps" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./theatre.wav" name="rollSoundTheatre" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./transp.wav" name="rollSoundTransp" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./walking.wav" name="rollSoundWalking" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./walnut-ave.wav" name="rollSoundWalnut" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>
<embed src="./welcome.wav" name="rollSoundWelcome" width=1 height=1 hidden=true
autostart=false loop=false mastersound>
<embed src="./rec-center.wav" name="rollSoundRecCenter" width=1 height=1 
hidden=true
autostart=false loop=false mastersound>














</body>
</html>

Kristina Seyer Smith
Manager of Maps and Records
Spatial Information/GIS

Facilities Operations, Maps and Records
327 Bonair Siding
Stanford, CA 94305-7270
650-723-0594 Voice
650-723-7905 FAX
mailto:seyersmith@stanford.edu
http://www-facilities.stanford.edu/maps
Received on Monday, 15 January 2001 21:18:40 UTC