5 Replies Latest reply: Jan 29, 2013 12:41 PM by ♥Schrene

Change a divs image background

mhartington Jan 29, 2013 9:52 AM

Is there any way to change a divs background image in edge animate? The background image is defined by an external css file but at a certain point on the timeline, I want to fade in the new background image. Any ideas?

1. Re: Change a divs image background

♥Schrene Jan 29, 2013 9:57 AM (in response to mhartington)

Easy just use this code where you need it:
sym.$("pic").css("background" , "url(images/newPic.jpg) no-repeat");
Like Show 0 Likes (0)

Actions
2. Re: Change a divs image background

mhartington Jan 29, 2013 10:05 AM (in response to ♥Schrene)

JavaScript isn't really my strong point so just to clarify,

I selecte the point on the time line when i want to change the image, open up the actions and enter the code, then it should work?

What about adding transitions like fade in?

Thanks for the quick responce
Like Show 0 Likes (0)

Actions
3. Re: Change a divs image background

♥Schrene Jan 29, 2013 11:52 AM (in response to mhartington)

It all depends on how you want to set it up.

If you want the images to auto change you would put the code in the timeline like this:
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Auto .html
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Auto .zip

If you would like to click on a button to change image try this:
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image.html
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image.zip

If you would like to change image with next and back buttons try this:
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Next .html
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Next .zip
Like Show 0 Likes (0)

Actions
4. Re: Change a divs image background

mhartington Jan 29, 2013 11:59 AM (in response to ♥Schrene)

All those are help full but I thinking more of calling on a css transition. So When the page loads, image A will be seen. then after 4 seconds, Image B will be faded in using the javascript you posted early and additional javascript to call a css fade in transition
Like Show 0 Likes (0)

Actions
5. Re: Change a divs image background

♥Schrene Jan 29, 2013 12:41 PM (in response to mhartington)

Then your codes in the timeline would look more like these:
sym.$("pic").css({ "background": "url(images/toy-A.jpg) no-repeat","opacity" : "1.0"});

sym.$("pic").css({ "background": "url(images/toy-A.jpg) no-repeat","opacity" : "0.6"});

sym.$("pic").css({ "background": "url(images/toy-B.jpg) no-repeat","opacity" : "0.6"});

sym.$("pic").css({ "background": "url(images/toy-B.jpg) no-repeat","opacity" : "1.0"});

I updated this sample to include a very rough sample on a few images:
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Auto .html
http://www.meschrene.puremadnessproductions.net/Samples/Change-Image/Background-Image-Auto .zip

The sample needs more lines of code, updated codes to reflect the above sample, and better timinng.
Like Show 0 Likes (0)

Actions