applyToBackground(node: HTMLElement, rowIdx: Number, colIdx: Number, addToImage: String, addToPosition: String);
node. DOM element, to which the method is applied.
rowIdx. Row index.
colIdx. Column index.
addToImage. A row added to the link to image in css class. Optional parameter.
addToPosition. A row added to description of image position in css class. Optional parameter.
The applyToBackground method sets the specified sprite image as a DOM element background.
To execute the example, add links to the PP.js library and the PP.css visual styles tables to HTML page. The file that contains a set of icons named ProfileProducts.png should be available. This file should be on one level with the HTML page. Create a list of icons, then create a div element and set a sprite image as a background image for it:
// Create a list of icons
var imagelist = new PP.ImageList();
// Specify a icons list source
imagelist.setSource("ProfileProducts.png");
// Set icon height and width
imagelist.setIconHeight(32);
imagelist.setIconWidth(32);
// Create a div element
var divElem = PP.createElement(document.body);
// Set background image for div element
imagelist.applyToBackground(divElem, 1, 0);
// Display horizontal and vertical offset values in the console
console.log(imagelist.getLeft(), imagelist.getTop());
After executing the example the console displays horizontal and vertical offset values. The div element is displayed on the HTML page with the set background image from sprite:
See also: