/    Sign up×
Community /Pin to ProfileBookmark

2 nubie questions

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

when I click on it it toggles a play/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 [B]I want to only have to test for “images/playBtn.png”.[/B]
Another problem I have is in the else part the image changes like it should but the [B]clearInterval(showOn); doesn’t seem to do anything I thought it would pause the slideshow.[/B]

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@twseitexJul 17.2011 — Hi,


compare .src only with .src

f.e.


var auto1 = document.getElementById("button1");

var auto2 = document.getElementById("button2");

auto1.src="images/pauseBtn1.png";

auto2.src="images/pauseBtn2.png";

if(auto1.src==auto2.src) ....



----------------------

create a dummy object to create src

var ptImgObj=document.createElement('IMG');

var ImgObjExist=(ptImgObj!=null);

if(ImgObjExist)

{

var ptImg=document.body.appendChild(ptImgObj);

ImgObjExist=(ptImg!=null);

}

if(ImgObjExist)

{

ptImg.style.visibility='hidden';

ptImg.src="";

}


function getSRC(filename)

{

if(ImgObjExist)

{ptImg.src=filename;}

else{ptImg.src="";} // try - catch for error catch during set .src

return ptImg.src;

}

var auto1 = document.getElementById("button1");

auto1.src="images/pauseBtn1.png";

if(auto1.src==getSRC("images/pauseBtn2.png")) ....

// if many pointer and filename use arrays for store so

// document.getElementById("") one time needed


------------------------------

window.setInterval("loadNextPic()", 5000);

var timerId=setInterval(...);

.....

clearInterval(timerId);


var timerID=0;

auto.onclick = function()

{

if(auto.src == "file:///C:/jimslounge.com/jsClass/lab6.1/images/playBtn.png")

{

auto.src="images/pauseBtn.png";

timerID = window.setInterval("loadNextPic()", 5000);

// not local to function

}

else

{

auto.src="images/playBtn.png";

clearInterval(timerID); // global timerID

}

}


--------------------------------

On webserver a url is relative to root f.e. to www.test.com

so http://www.test.com/path/ .... only if webpage online

so folder ob webpage local on harddisk
in subfolder exist f.e. pictures
so usee path like ../ etc.
×

Success!

Help @attaboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...