JavaScript display of multiple images within a png file

purplesoup
purplesoup used Ask the Experts™
on
I believe it is possible to have a png file with multiple images on it, and have them rendered separately using JavaScript., However I've not been able to find out how to do this. Can anyone assist me?

Just to be clear, I can follow this
https://www.quora.com/How-do-you-insert-an-image-in-Javascript#

But what I'm looking for it something more  flexible, where the png file has various images positioned within it, and the JavaScript can access the images separately, to overlay one image on top of another, not simply adjust the offset of each image.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Consultant & Challenge Subduer
Top Expert 2009
Commented:
What you're asking about is called "CSS Sprites," or perhaps some extension of that which uses some JS.

In CSS sprites, you basically use background images and then set the background-position, background-repeat, and background-size properties as needed.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites/
purplesoupProgrammer

Author

Commented:
Thank you this was very helpful!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial