私の良き (そして非常に賢い) 友人である Eli Huntington のおかげで、非常に複雑ではありますが、答えがあります。作業中の Web サイトへのリンクと、この質問に関連するコードのスニペットを次に示します。うまくいけば、それは他の貧しい魂を助けます. ここに関連するスレッド ( jquery background change one axis only ) があり、関連する質問がはるかに単純であり、回答が得られることを願っています。これを行うには、もっと簡単な方法が必要です。
ウェブサイト: http://avalon.eaw.com/
スクリプト: (finishScroll と finishScroll2 は、この特定の質問に関係のない localScroll プラグイン関数です)
// FINISHES SCRIPT //
// Make an object to hold various information about the application
finishes = {
cabinets: { // Columns
colors: ['polar', 'piano'], // Add new cabinet colors here
/*
* New cabinet colors are represented in columns and can be
* added to the sprite to the right edge.
* After adding two new columns to the Sprite
* add the following after polar_custom: '-1131px' (don't forget comma):
*
* anycolor_standard: '-1508px' //(i'm guessing)
* anycolor_custom: '-1885px' //(also guessing)
*
*/
piano_standard : '0px', // Column where horn matches grill
piano_custom : '-377px', // Column where horn is custom color
polar_standard : '-754px',
polar_custom : '-1131px'
},
colors: { // Rows
// New colors can be added to the sprite at the bottom and then added last here with the position (from the sprite)
siren: '0px',
medallion: '-333px',
starlight: '-666px',
machine: '-999px'
},
current_cabinet_color: 'piano', // Will be updated by click events to updateCabinet
current_grille_color: 'siren', // Will be udpated by click events to updateCabinet
current_horn_color: 'standard' // Will be udpated by click events to updateCabinet
};
function updateCabinet(component, color) {
if(!component || !color) return false; // Exit if missing values
// Take component and update the 'finishes' object above based on which part we are changing
switch(component) {
case 'cabinet':
finishes.current_cabinet_color = color;
break;
case 'horn':
if(color != 'piano' && color != 'polar') {
finishes.current_horn_color = 'custom';
} else {
finishes.current_horn_color = 'standard';
}
break;
case 'grille':
finishes.current_grille_color = color;
break;
default:
return false; // Invalid component name passed in
}
// Now that we have updated the 'finishes' object, we can get our xpos and ypos values from it
xpos = finishes.cabinets[finishes.current_cabinet_color + '_' + finishes.current_horn_color];
ypos = finishes.colors[finishes.current_grille_color];
// Finally make sure we have good values for xpos and ypos and do the CSS udpate
if(xpos && ypos) {
$('#target').css('background-position', xpos+' '+ypos );
}
return true;
}
HTML:
<!-- FINISHES -->
<div id="finishes" class="item"><a name="finishes"></a>
<div id="swatches" class="content">
<div class="finishscroll">
<p class="text">Avalon by EAW represents a radical departure from any dance club loudspeaker ever created, including our own original Avalon Series. Everything about Avalon by EAW breaks new ground. The system design turns the loudspeaker inside-out, mounting the MF/HF horn outside the grille. And the grille - concave and sculpted in clean, straight lines - expresses the symmetry that unifies the design.</p>
<div id="target"></div>
<div id="label-cab" class="label">cabinet</div>
<ul id="swatch-cab" class="swatch">
<li class="patch"><a href="#piano" onclick="updateCabinet('cabinet','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a></li>
<li class="patch"><a href="#polar" onclick="updateCabinet('cabinet','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a></li>
</ul>
<div id="label-horn" class="label">horn</div>
<div id="content-finishscroll" class="swatch">
<div class="scroll-section">
<ul>
<li id="piano" class="patch">
<a href="#" onclick="updateCabinet('horn','piano')"><img src="/images/cabinets/swatches/swatch-piano.jpg" /><p>piano</p></a>
</li>
<li id="polar" class="patch">
<a href="#" onclick="updateCabinet('horn','polar')"><img src="/images/cabinets/swatches/swatch-polar.jpg" /><p>polar</p></a>
</li>
</ul>
</div>
</div>
</div>
<div class="finishscroll2">
<div id="label-grille" class="label">grille</div>
<ul id="swatch-grille" class="swatch">
<li class="patch"><a href="#siren" onclick="updateCabinet('grille','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a></li>
<li class="patch"><a href="#medallion" onclick="updateCabinet('grille','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a></li>
<li class="patch"><a href="#starlight" onclick="updateCabinet('grille','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a></li>
<li class="patch"><a href="#machine" onclick="updateCabinet('grille','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a></li>
</ul>
<div id="content-finishscroll2">
<div class="swatch" style="width:73px;">
<ul>
<li id="siren" class="patch">
<a href="#" onclick="updateCabinet('horn','siren')"><img src="/images/cabinets/swatches/swatch-siren.jpg" /><p>siren</p></a>
</li>
<li id="medallion" class="patch">
<a href="#" onclick="updateCabinet('horn','medallion')"><img src="/images/cabinets/swatches/swatch-medallion.jpg" /><p>medallion</p></a>
</li>
<li id="starlight" class="patch">
<a href="#" onclick="updateCabinet('horn','starlight')"><img src="/images/cabinets/swatches/swatch-starlight.jpg" /><p>starlight</p></a>
</li>
<li id="machine" class="patch">
<a href="#" onclick="updateCabinet('horn','machine')"><img src="/images/cabinets/swatches/swatch-machine.jpg" /><p>machine</p></a>
</li>
</ul>
</div>
</div>
</div>
<div style="position:absolute; top:450px; left:-60px"><img src="http://avalon.eaw.com/images/shadow-finishes.png" /></div>
</div>
</div><!-- #finishes -->
ハッピーコーディング！