Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>test</title>
- <style type="text/css">
- ul, li {margin:0; padding:0; list-style:none; }
- p {float:left; padding:6px; background:#CCC; border:1px solid #666; cursor:pointer; margin:0 10px 10px 0; border-radius:6px; }
- ul#colours {float:left; width:171px; margin:0 30px 0 0; }
- ul#ironmongery {float:right; width:300px; }
- li {float:left; margin:0 20px 20px 0; cursor:pointer; }
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- imgFldr = 'period-black';
- //click the hardware buttons and change the folder where the images are coming from, but not the image itself (by name)
- $('#standardBlack').click(function(){
- $("#pic").attr("src",'standard-black/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#standardGold').click(function(){
- $("#pic").attr("src",'standard-gold/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#standardChrome').click(function(){
- $("#pic").attr("src",'standard-chrome/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#monkey').click(function(){
- $("#pic").attr("src",'monkey/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#periodBlack').click(function(){
- $("#pic").attr("src",'period-black/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#periodBrass').click(function(){
- $("#pic").attr("src",'period-brass/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#periodChrome').click(function(){
- $("#pic").attr("src",'period-chrome/'+$("#pic").attr("src").split('/')[1]);
- });
- $('#standardWhite').click(function(){
- $("#pic").attr("src",'standard-white/'+$("#pic").attr("src").split('/')[1]);
- });
- //on hovering the 21 or 24 colour options, change the colour of the image but not the folder
- $('#black').hover(function(){
- $("#pic").attr("src",imgFldr+"/black.jpg");
- });
- $('#blueGrey').hover(function(){
- $("#pic").attr("src",imgFldr+"/blue-grey.jpg");
- });
- $('#burgundy').hover(function(){
- $("#pic").attr("src",imgFldr+"/burgundy.jpg");
- });
- $('#calmGrey').hover(function(){
- $("#pic").attr("src",imgFldr+"/calm-grey.jpg");
- });
- $('#cream').hover(function(){
- $("#pic").attr("src",imgFldr+"/cream.jpg");
- });
- $('#fieldMouse').hover(function(){
- $("#pic").attr("src",imgFldr+"/field-mouse.jpg");
- });
- });
- </script>
- </head>
- <body>
- <div id="windowPlanner">
- <ul id="colours">
- <li><img id="black" src="colours/black.jpg" width="37" height="37" alt="black" /></li>
- <li><img id="blueGrey" src="colours/blue-grey.jpg" width="37" height="37" alt="black" /></li>
- <li><img id="burgundy" src="colours/burgundy.jpg" width="37" height="37" alt="black" /></li>
- <li><img id="calmGrey" src="colours/calm-grey.jpg" width="37" height="37" alt="black" /></li>
- <li><img id="cream" src="colours/cream.jpg" width="37" height="37" alt="black" /></li>
- <li><img id="fieldMouse" src="colours/field-mouse.jpg" width="37" height="37" alt="black" /></li>
- </ul>
- <img id="pic" src="monkey/black.jpg" />
- <ul id="ironmongery">
- <li><img id="standardBlack" src="ironmongery/black.png" width="80" height="80" /></li>
- <li><img id="standardGold" src="ironmongery/brass.png" width="80" height="80" /></li>
- <li><img id="standardChrome" src="ironmongery/chrome.png" width="80" height="80" /></li>
- <li><img id="monkey" src="ironmongery/monkey.png" width="80" height="80" /></li>
- <li><img id="periodBlack" src="ironmongery/period-black.png" width="80" height="80" /></li>
- <li><img id="periodBrass" src="ironmongery/period-brass.png" width="80" height="80" /></li>
- <li><img id="periodChrome" src="ironmongery/period-chrome.png" width="80" height="80" /></li>
- <li><img id="standardWhite" src="ironmongery/white.png" width="80" height="80" /></li>
- </ul>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement