Making an on/off button with images
<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>
