title: Making an on/off button with images
body: <p>I have two images, sound_on.png and sound_off.png. Both have the same height and dimensions.</p>
  
  <p>I would like to attach a JavaScript for the following action:</p>
  
  <ol>
  <li>When the pressed images changes from sound_off.png to sound_on.png and the sound plays</li>
  <li>When the button is pressed again it changes back from sound_on.png to sound_off.png and the sound stops with the onclick command</li>
  </ol>
  
  <p>At the moment I have these lines of code:</p>
  
  <pre><code>&lt;a href="#" onClick="playAudio();"&gt;&lt;img src="images/general/sound-on.png" width="40" height="32"&gt;&lt;/a&gt;
  &lt;a href="#" onClick="stopAudio();"&gt;&lt;img src="images/general/sound-off.png" width="40" height="32"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>What code do I need to make them like the above example?</p>
  
  <p>I have this part:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .on {background-image:url url(images/general/sound-off.png)); background-repeat:no-repeat;}
  .off {background-image:url(images/general/sound-on.png); background-repeat:no-repeat;}
  &lt;/style&gt;
  &lt;script language="javascript"&gt;
  function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
  &lt;/script&gt;
  </code></pre>
  
  <p>With this DIV for the button:</p>
  
  <pre><code>div id="onoff" class="playlist_btn"&gt;&lt;img src="images/general/sound-off.png" width="50 height="50" onclick="togglestyle(onoff)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This makes the toggle, but I have no idea so far how to connect the onclick command to get the audio playing and to stop it again.</p>
  
  <p>Could it be something like this?</p>
  
  <pre><code>function togglestyle(el){if(el.className == "on" onClick="playAudio()") {el.className="off" onClick"stopAudio()";} else {el.className="on";}}
  </code></pre>