Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

jquery

By: a guest on Jul 20th, 2011  |  syntax: HTML  |  size: 4.08 KB  |  hits: 52  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1.         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.         <html xmlns="http://www.w3.org/1999/xhtml">
  3.         <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>test</title>
  6.         <style type="text/css">
  7.        
  8.         ul, li                  {margin:0; padding:0; list-style:none; }
  9.         p                               {float:left; padding:6px; background:#CCC; border:1px solid #666; cursor:pointer; margin:0 10px 10px 0; border-radius:6px; }
  10.         ul#colours              {float:left; width:171px; margin:0 30px 0 0; }
  11.         ul#ironmongery  {float:right; width:300px; }
  12.         li                              {float:left; margin:0 20px 20px 0; cursor:pointer; }
  13.         </style>
  14.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  15.        
  16.         <script type="text/javascript">
  17.         $(document).ready(function(){
  18.                 imgFldr = 'period-black';
  19.        
  20.                 //click the hardware buttons and change the folder where the images are coming from, but not the image itself (by name)
  21.                 $('#standardBlack').click(function(){
  22.                         $("#pic").attr("src",'standard-black/'+$("#pic").attr("src").split('/')[1]);
  23.                 });
  24.                 $('#standardGold').click(function(){
  25.                         $("#pic").attr("src",'standard-gold/'+$("#pic").attr("src").split('/')[1]);
  26.                 });
  27.                 $('#standardChrome').click(function(){
  28.                         $("#pic").attr("src",'standard-chrome/'+$("#pic").attr("src").split('/')[1]);
  29.                 });
  30.                 $('#monkey').click(function(){
  31.                         $("#pic").attr("src",'monkey/'+$("#pic").attr("src").split('/')[1]);
  32.                 });
  33.                 $('#periodBlack').click(function(){
  34.                         $("#pic").attr("src",'period-black/'+$("#pic").attr("src").split('/')[1]);
  35.                 });
  36.                 $('#periodBrass').click(function(){
  37.                         $("#pic").attr("src",'period-brass/'+$("#pic").attr("src").split('/')[1]);
  38.                 });
  39.                 $('#periodChrome').click(function(){
  40.                         $("#pic").attr("src",'period-chrome/'+$("#pic").attr("src").split('/')[1]);
  41.                 });
  42.                 $('#standardWhite').click(function(){
  43.                         $("#pic").attr("src",'standard-white/'+$("#pic").attr("src").split('/')[1]);
  44.                 });
  45.        
  46.                 //on hovering the 21 or 24 colour options, change the colour of the image but not the folder
  47.                 $('#black').hover(function(){
  48.                         $("#pic").attr("src",imgFldr+"/black.jpg");
  49.                 });
  50.                 $('#blueGrey').hover(function(){
  51.                         $("#pic").attr("src",imgFldr+"/blue-grey.jpg");
  52.                 });
  53.                 $('#burgundy').hover(function(){
  54.                         $("#pic").attr("src",imgFldr+"/burgundy.jpg");
  55.                 });
  56.                 $('#calmGrey').hover(function(){
  57.                         $("#pic").attr("src",imgFldr+"/calm-grey.jpg");
  58.                 });
  59.                 $('#cream').hover(function(){
  60.                         $("#pic").attr("src",imgFldr+"/cream.jpg");
  61.                 });
  62.                 $('#fieldMouse').hover(function(){
  63.                         $("#pic").attr("src",imgFldr+"/field-mouse.jpg");
  64.                 });
  65.        
  66.         });
  67.         </script>
  68.         </head>
  69.        
  70.         <body>
  71.         <div id="windowPlanner">
  72.                 <ul id="colours">
  73.                         <li><img id="black" src="colours/black.jpg" width="37" height="37" alt="black" /></li>
  74.                         <li><img id="blueGrey" src="colours/blue-grey.jpg" width="37" height="37" alt="black" /></li>
  75.                         <li><img id="burgundy" src="colours/burgundy.jpg" width="37" height="37" alt="black" /></li>
  76.                         <li><img id="calmGrey" src="colours/calm-grey.jpg" width="37" height="37" alt="black" /></li>
  77.                         <li><img id="cream" src="colours/cream.jpg" width="37" height="37" alt="black" /></li>
  78.                         <li><img id="fieldMouse" src="colours/field-mouse.jpg" width="37" height="37" alt="black" /></li>
  79.                 </ul>
  80.                
  81.                 <img id="pic" src="monkey/black.jpg" />
  82.                
  83.                 <ul id="ironmongery">
  84.                         <li><img id="standardBlack" src="ironmongery/black.png" width="80" height="80" /></li>
  85.                         <li><img id="standardGold" src="ironmongery/brass.png" width="80" height="80" /></li>
  86.                         <li><img id="standardChrome" src="ironmongery/chrome.png" width="80" height="80" /></li>
  87.                         <li><img id="monkey" src="ironmongery/monkey.png" width="80" height="80" /></li>
  88.                         <li><img id="periodBlack" src="ironmongery/period-black.png" width="80" height="80" /></li>
  89.                         <li><img id="periodBrass" src="ironmongery/period-brass.png" width="80" height="80" /></li>
  90.                         <li><img id="periodChrome" src="ironmongery/period-chrome.png" width="80" height="80" /></li>
  91.                         <li><img id="standardWhite" src="ironmongery/white.png" width="80" height="80" /></li>
  92.                 </ul>
  93.         </div>
  94.         </body>
  95.         </html>
create a new version of this paste RAW Paste Data