Copy link to clipboard
Copied
What JS code can I apply to a button symbol within ANIMATE CC to change the background image of HTML parent page onclick?
I'm currently using getElementsByTagName( ) - not functioning at all...
Current CSS declaration in HTML page:
html
{
background: url(img/bkg3.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Current JS on button symbol within Animate CC:
function fl_MouseClickHandler() {
function changeBackground() {
this.document.getElementsByTagName("html").style.background = "url(img/bkg4.png)";
}
}
Any assistance would be greatly appreciated!
Thanks!
Sorry, this might not work because you declared the background-image for the html-element in the first instance.
I would supply an id to you body like
<body id="docbody" onload="init();">
Further I would css-declare:
#docbody {
background-image: url("img/bkg3.png");
background-size: cover}
then in JS for your button:
function YOURBUTTONCLICKHANDLER(e) {
document.getElementById("docbody").style.backgroundImage = "url('img/bkg4.png')";
}
this.YOURBUTTONNAME.addEventListener('click', YOURBUTTON
...Copy link to clipboard
Copied
Hi March
try
this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";
Klaus
Copy link to clipboard
Copied
Hi Klaus
Thanks for your quick reply!
I updated my button symbol code with your string:
this.cwbut.addEventListener("click", fl_MouseClickHandler.bind(this));
function fl_MouseClickHandler() {
this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";
}
I updated my CSS changing 'html' to 'body':
body
{
background: url(img/bkg3.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When I click on my button (within canvas), it does not replace the current background image bkg3.png with bkg4.png.
FYI
My FLA architecture is simple:
One frame.
One layer with single button symbol.
One layer with JS button symbol code.
HTML Architecture
One CSS background image.
One button (canvas).
Assets
Two PNGs.
Thanks again for your help Klaus!
Copy link to clipboard
Copied
March
this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";
this.document ... the this can't be right .. long story
try my second revised suggestion.
Klaus
Copy link to clipboard
Copied
Klaus
Brilliant!
You are...
Working nicely.
Thank You Sir
Copy link to clipboard
Copied
March you're welcome.
Please could you do me the favor and mark my answer which worked for you as correct?
cheers
Klaus
Copy link to clipboard
Copied
Sorry, this might not work because you declared the background-image for the html-element in the first instance.
I would supply an id to you body like
<body id="docbody" onload="init();">
Further I would css-declare:
#docbody {
background-image: url("img/bkg3.png");
background-size: cover}
then in JS for your button:
function YOURBUTTONCLICKHANDLER(e) {
document.getElementById("docbody").style.backgroundImage = "url('img/bkg4.png')";
}
this.YOURBUTTONNAME.addEventListener('click', YOURBUTTONCLICKHANDLER);
Things in italic/CAPITAL setyour own names
Klaus
Copy link to clipboard
Copied
Reading your reply now...