2 nubie questions

[attaboy]

I have a img element that looks like this:
<img id="button" src="images/playBtn.png" />

I use the image as a play/pause button when I click on it it toggles between a image of a play button and a pause button. The button changes as it should but the slideshow doesn't turn off when I click pause.

the code to handle the element:
Code:

var auto = document.getElementById("button");
// alert(auto.src);

auto.onclick = function() {
if(auto.src == "file:///C:/jimslounge.com/jsClass/lab6.1/images/playBtn.png") {
auto.src="images/pauseBtn.png";
var showOn = window.setInterval("loadNextPic()", 5000);
}else{
auto.src="images/playBtn.png";
clearInterval(showOn);
}
}

I noticed when I did an alert on auto src it displays the full path. It only works with the full path I want to only have to test for "images/playBtn.png".
Another problem I have is in the else part the image changes like it should but the clearInterval(showOn); doesn't seem to do anything I thought it would pause the slideshow.

[devnull69]

You declare showOn as a local variable to the click handler. This variable will be lost each time the method quits. Next time it will be reinitialized.

var auto = document.getElementById("button");
var showOn = 0;
// alert(auto.src);

auto.onclick = function() {
   if(auto.src == "file:///C:/jimslounge.com/jsClass/lab6.1/images/playBtn.png") {
      auto.src="images/pauseBtn.png";
      showOn = window.setInterval("loadNextPic()", 5000);
   }else{
      auto.src="images/playBtn.png";
      clearInterval(showOn);
   }
}