javascript

CHAPTER 10 ■ SCRIPTING BOM
420
Swapping Sprites by ID or Class
Oftentimes a number of elements will share the same parts of a sprite. In an e-commerce site, for
example, every Add to Cart link would share the same off and over image. If you have several JavaScript
scrollers on a page, the same thing goes for the arrow sprites.
One way to fix this would be to give each element a unique ID, say add_to_cart_01 through
add_to_cart_72. In addition to being error prone and inefficient, that would be fairly ridiculous.
Numbering ID values won’t do. However, swapping sprites by class would be quite elegant.
Identically styled elements typically are of the same class. So, swapping their sprites by class makes a
good deal of sense.
That’s what we’ll do then. It’s pretty simple to modify prepSprites() and swapSprites(). In the var
bit of the for loop, declare a member variable. Then in the beginning of the for block, initialize member to
id or className by way of the || operator. If id contains "", which is falsey, the || returns the value of the
class attribute, which is a string. For our arrows, that would be "left arrow sprite" or "right arrow sprite".
Insofar as an object member may be named with any string, including "", we’ll next name a member in
sprites with one of those two class strings, but only if sprites does not already have a member member.
In that event, we’ll calculate offsets just like in Chapter 9 except that we need to replace
sprites[elements[i].id] with sprites[member] inasmuch as members are not necessarily named by ID
anymore. So, there are four replacements in the DOM version and three in the Internet Explorer version:
var prepSprites = window.getComputedStyle ?
function () {
var elements = findClass("sprite"), sprites = {};
for (var i = elements.length, offsets = null, member; i --; ) {
member = elements[i].id || elements[i].className;
if (! sprites[member]) {
sprites[member] = [];
sprites[member][0] = queryCascade(elements[i], "backgroundPosition");
offsets = sprites[member][0].split(/\s+/);
sprites[member][1] = 1 - parseInt(queryCascade(elements[i], "width")) + "px " +
offsets[1];
}
addListener(elements[i], "mouseover", slideSprite);
addListener(elements[i], "mouseout", slideSprite);
}
function slideSprite(e) {
if (e.type == "mouseover") {
e.target.style.backgroundPosition = sprites[e.target.id][1];
} else {
e.target.style.backgroundPosition = sprites[e.target.id][0];
}
}
} :
function () {
var elements = findClass("sprite"), sprites = {};
for (var i = elements.length, offsets = null, member; i --; ) {
member = elements[i].id || elements[i].className;
if (! sprites[member]) {
sprites[member] = [];
offsets = [queryCascade(elements[i], "backgroundPositionX"), queryCascade(elements[i],
"backgroundPositionY")];