Highlighted

Animate CC 2019: Button symbol not communicating with parent HTML background element

New Here ,
Dec 20, 2018

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', YOURBUTTONCLICKHANDLER);

Things in italic/CAPITAL setyour own names

Klaus

TOPICS
Discussions

Views

281

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate CC 2019: Button symbol not communicating with parent HTML background element

New Here ,
Dec 20, 2018

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', YOURBUTTONCLICKHANDLER);

Things in italic/CAPITAL setyour own names

Klaus

TOPICS
Discussions

Views

282

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 20, 2018 0
Advocate ,
Dec 20, 2018

Copy link to clipboard

Copied

Hi March

try

this.document.getElementsByTagName("body").style.background = "url(img/bkg4.png)";

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
New Here ,
Dec 20, 2018

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Advocate ,
Dec 20, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
New Here ,
Dec 20, 2018

Copy link to clipboard

Copied

Klaus

Brilliant!

You are...

Working nicely.

Thank You Sir

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
kdmemory LATEST
Advocate ,
Dec 20, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
Advocate ,
Dec 20, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0
New Here ,
Dec 20, 2018

Copy link to clipboard

Copied

Reading your reply now...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 0