CSS2: howto disable audio?

CSS2: howto disable audio?

http://www.peepo.co.uk uses css to provide audio on event.

It would be convenient for some users if a button to disable audio  
were provided.
How might this be done, without using script?

please find attached a reduced testcase, and brief instructions.


Jonathan Chetwynd
Accessibility Consultant on Learning Disabilities and the Internet

use the relevant nightly build from Camino, Firefox or Opera:
(if necessary place in a temporary directory)

OS X: http://www.caminobrowser.org/download/releases/nightly/

OS X: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest- 
Win: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest- 

OS X: http://snapshot.opera.com/mac/o920w_3659.dmg
Win: http://snapshot.opera.com/windows/o920w_8762m.exe

and install an audio plugin such as quicktime:

for mouse users: place the pointer over an icon, a speaker icon  
appears, move the pointer over the speaker to play the sound.

unfortunately, for keyboard users, the audio plays automatically: use  
tab or Q/A to navigate.
Is there any way I can improve on this, given that SVG is not read by  

to change spoken language and text, use Camino,  and change your  
operating system language, then reboot
to change text only, use Opera in XP: tools,preferences, general,  


<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%"
<style type="text/css" id="css"><![CDATA[
.audio {display: none}
a:hover  .audio {display: block}
a:focus  .audio {display: block}

<a xlink:href="http://www.peepo.co.uk/index.svg">
<rect x="5" y="5" width="255" height="25" style="fill:#aaa"/>
<text x="10" y="25" >audio on :hover or :focus</text>
<foreignObject class="audio" xlink:href="http://www.peepo.co.uk/sound/ 
     <html xmlns="http://www.w3.org/1999/xhtml" >
	 <object data="http://www.peepo.co.uk/sound/en/splat.mp3" />


Received on Monday, 9 April 2007 04:44:52 UTC