new images and no preload

final images and changed the code to effect css not image so no preload needed

css/main.css

@@ -50,6 +50,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 255, 0);
 }
 #image1 {
     margin: 0px;
@@ -68,6 +69,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(0, 255, 42);
 }
 
 #image3 {
@@ -77,6 +79,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(0, 204, 255);
 }
 
 #image4 {
@@ -86,6 +89,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(183, 0, 255);
 }
 
 #image5 {
@@ -95,6 +99,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 136, 0);
 }
 
 #image6 {
@@ -104,6 +109,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 35, 35);
 }
 
 #image7 {
@@ -113,6 +119,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 217, 0);
 }
 
 #image8 {
@@ -122,6 +129,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(119, 0, 255);
 }
 
 div.img img {

dist/css/main.css

@@ -50,6 +50,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 255, 0);
 }
 #image1 {
     margin: 0px;
@@ -68,6 +69,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(0, 255, 42);
 }
 
 #image3 {
@@ -77,6 +79,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(0, 204, 255);
 }
 
 #image4 {
@@ -86,6 +89,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(183, 0, 255);
 }
 
 #image5 {
@@ -95,6 +99,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 136, 0);
 }
 
 #image6 {
@@ -104,6 +109,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 35, 35);
 }
 
 #image7 {
@@ -113,6 +119,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(255, 217, 0);
 }
 
 #image8 {
@@ -122,6 +129,7 @@ span.clear { clear: left; display: block; } /* clears the float thus ensuring th
     width: 32.6%;
     float: left;
     text-align: center;
+    background-color: rgb(119, 0, 255);
 }
 
 div.img img {

dist/index.html

@@ -5,24 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Orchlab French Horn</title>
   <link rel="stylesheet" href="css/main.css" />
-  <link rel="preload" href="images/image0.jpg" as="image">
-  <link rel="preload" href="images/image0_2.jpg" as="image">
-  <link rel="preload" href="images/image1.jpg" as="image">
-  <link rel="preload" href="images/image1_2.jpg" as="image">
-  <link rel="preload" href="images/image2.jpg" as="image">
-  <link rel="preload" href="images/image2_2.jpg" as="image">
-  <link rel="preload" href="images/image3.jpg" as="image">
-  <link rel="preload" href="images/image3_2.jpg" as="image">
-  <link rel="preload" href="images/image4.jpg" as="image">
-  <link rel="preload" href="images/image4_2.jpg" as="image">
-  <link rel="preload" href="images/image5.jpg" as="image">
-  <link rel="preload" href="images/image5_2.jpg" as="image">
-  <link rel="preload" href="images/image6.jpg" as="image">
-  <link rel="preload" href="images/image6_2.jpg" as="image">
-  <link rel="preload" href="images/image7.jpg" as="image">
-  <link rel="preload" href="images/image7_2.jpg" as="image">
-  <link rel="preload" href="images/image8.jpg" as="image">
-  <link rel="preload" href="images/image8_2.jpg" as="image">
   <script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.69/Tone.js'></script>  <!-- bring in the Tone.js library - google search for tone.js cdn-->
 </head>
 
@@ -85,31 +67,31 @@
 
 
     <div id="image0">
-      <img src="images/image0.jpg" alt="One" width="1250" height="1250" id="i0">
+      <img src="images/image0.png" alt="One" width="1250" height="1250" id="i0">
     </div>
     <div id="image1">
-      <img src="images/image1.jpg" alt="One" width="1250" height="1250" id="i1">
+      <img src="images/image1.png" alt="One" width="1250" height="1250" id="i1">
     </div>
     <div id="image2">
-      <img src="images/image2.jpg" alt="One" width="1250" height="1250" id="i2">
+      <img src="images/image2.png" alt="One" width="1250" height="1250" id="i2">
     </div>
     <div id="image3">
-      <img src="images/image3.jpg" alt="One" width="1250" height="1250" id="i3">
+      <img src="images/image3.png" alt="One" width="1250" height="1250" id="i3">
     </div>
     <div id="image4">
-      <img src="images/image4.jpg" alt="One" width="1250" height="1250" id="i4">
+      <img src="images/image4.png" alt="One" width="1250" height="1250" id="i4">
     </div>
     <div id="image5">
-      <img src="images/image5.jpg" alt="One" width="1250" height="1250" id="i5">
+      <img src="images/image5.png" alt="One" width="1250" height="1250" id="i5">
     </div>
     <div id="image6">
-      <img src="images/image6.jpg" alt="One" width="1250" height="1250" id="i6">
+      <img src="images/image6.png" alt="One" width="1250" height="1250" id="i6">
     </div>
     <div id="image7">
-      <img src="images/image7.jpg" alt="One" width="1250" height="1250" id="i7">
+      <img src="images/image7.png" alt="One" width="1250" height="1250" id="i7">
     </div>
     <div id="image8">
-      <img src="images/image8.jpg" alt="One" width="1250" height="1250" id="i8">
+      <img src="images/image8.png" alt="One" width="1250" height="1250" id="i8">
     </div>
     <span class="clear"></span> <!-- this keeps the above elements within the parent div-->
   </div>

dist/sketch.js

@@ -27,44 +27,6 @@ var whichKey = [0,0,0,0,0,0,0,0,0];
 document.addEventListener("DOMContentLoaded", startup); // adding an event listener to the document which fires once the DOM is loaded and then triggers the startup function
 
 function startup() {
-  if (document.images) {   // preload the images for speed - this is a nasty hack to get this working nicely on firefox. I am also using html preload for all other browsers which is better for them
-    img0 = new Image();
-    img0.src = "images/image0.jpg";
-    img0_2 = new Image();
-    img0_2.src = "images/image0_2.jpg";
-    img1 = new Image();
-    img1.src = "images/image1.jpg";
-    img1_2 = new Image();
-    img1_2.src = "images/image1_2.jpg";
-    img2 = new Image();
-    img2.src = "images/image2.jpg";
-    img2_2 = new Image();
-    img2_2.src = "images/image2_2.jpg";
-    img3 = new Image();
-    img3.src = "images/image3.jpg";
-    img3_2 = new Image();
-    img3_2.src = "images/image3_2.jpg";
-    img4 = new Image();
-    img4.src = "images/image4.jpg";
-    img4_2 = new Image();
-    img4_2.src = "images/image4_2.jpg";
-    img5 = new Image();
-    img5.src = "images/image5.jpg";
-    img5_2 = new Image();
-    img5_2.src = "images/image5_2.jpg";
-    img6 = new Image();
-    img6.src = "images/image6.jpg";
-    img6_2 = new Image();
-    img6_2.src = "images/image6_2.jpg";
-    img7 = new Image();
-    img7.src = "images/image7.jpg";
-    img7_2 = new Image();
-    img7_2.src = "images/image7_2.jpg";
-    img8 = new Image();
-    img8.src = "images/image8.jpg";
-    img8_2 = new Image();
-    img8_2.src = "images/image8_2.jpg";
-  }
   for(var i = 0; i < 9; i++) {    // loop through the divs containing images and add event listeners
     var el = document.getElementById("image"+i);
     el.addEventListener("touchstart", handleStart, false);
@@ -486,10 +448,14 @@ synth.set(  // setup the synth - this is audio stuff really
 
 function playSynth(i) {
   synth.triggerAttack(notes[i], Tone.now());
-  document.getElementById(`i${i}`).src=`images/image${i}_2.jpg`; //using template literals to embed expressions within a string
+  //document.getElementById(`i${i}`).src=`images/image${i}_2.jpg`; //using template literals to embed expressions within a string
+  document.getElementById(`i${i}`).style.backgroundColor="magenta";
 }
 
+var col = ["rgb(255, 255, 0)", "rgb(0, 38, 255)", "rgb(0, 255, 42)", "rgb(0, 204, 255)", "rgb(183, 0, 255)", "rgb(255, 136, 0)", "rgb(255, 35, 35)", "rgb(255, 217, 0)", "rgb(119, 0, 255)"]; //colour of button
+
 function stopSynth(i) {
   synth.triggerRelease(notes[i], Tone.now());
-  document.getElementById(`i${i}`).src=`images/image${i}.jpg`;
+  //document.getElementById(`i${i}`).src=`images/image${i}.jpg`;
+  document.getElementById(`i${i}`).style.backgroundColor=col[i];
 }

index.html

@@ -5,24 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Orchlab French Horn</title>
   <link rel="stylesheet" href="css/main.css" />
-  <link rel="preload" href="images/image0.jpg" as="image">
-  <link rel="preload" href="images/image0_2.jpg" as="image">
-  <link rel="preload" href="images/image1.jpg" as="image">
-  <link rel="preload" href="images/image1_2.jpg" as="image">
-  <link rel="preload" href="images/image2.jpg" as="image">
-  <link rel="preload" href="images/image2_2.jpg" as="image">
-  <link rel="preload" href="images/image3.jpg" as="image">
-  <link rel="preload" href="images/image3_2.jpg" as="image">
-  <link rel="preload" href="images/image4.jpg" as="image">
-  <link rel="preload" href="images/image4_2.jpg" as="image">
-  <link rel="preload" href="images/image5.jpg" as="image">
-  <link rel="preload" href="images/image5_2.jpg" as="image">
-  <link rel="preload" href="images/image6.jpg" as="image">
-  <link rel="preload" href="images/image6_2.jpg" as="image">
-  <link rel="preload" href="images/image7.jpg" as="image">
-  <link rel="preload" href="images/image7_2.jpg" as="image">
-  <link rel="preload" href="images/image8.jpg" as="image">
-  <link rel="preload" href="images/image8_2.jpg" as="image">
   <script src='https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.69/Tone.js'></script>  <!-- bring in the Tone.js library - google search for tone.js cdn-->
 </head>
 
@@ -85,31 +67,31 @@
 
 
     <div id="image0">
-      <img src="images/image0.jpg" alt="One" width="1250" height="1250" id="i0">
+      <img src="images/image0.png" alt="One" width="1250" height="1250" id="i0">
     </div>
     <div id="image1">
-      <img src="images/image1.jpg" alt="One" width="1250" height="1250" id="i1">
+      <img src="images/image1.png" alt="One" width="1250" height="1250" id="i1">
     </div>
     <div id="image2">
-      <img src="images/image2.jpg" alt="One" width="1250" height="1250" id="i2">
+      <img src="images/image2.png" alt="One" width="1250" height="1250" id="i2">
     </div>
     <div id="image3">
-      <img src="images/image3.jpg" alt="One" width="1250" height="1250" id="i3">
+      <img src="images/image3.png" alt="One" width="1250" height="1250" id="i3">
     </div>
     <div id="image4">
-      <img src="images/image4.jpg" alt="One" width="1250" height="1250" id="i4">
+      <img src="images/image4.png" alt="One" width="1250" height="1250" id="i4">
     </div>
     <div id="image5">
-      <img src="images/image5.jpg" alt="One" width="1250" height="1250" id="i5">
+      <img src="images/image5.png" alt="One" width="1250" height="1250" id="i5">
     </div>
     <div id="image6">
-      <img src="images/image6.jpg" alt="One" width="1250" height="1250" id="i6">
+      <img src="images/image6.png" alt="One" width="1250" height="1250" id="i6">
     </div>
     <div id="image7">
-      <img src="images/image7.jpg" alt="One" width="1250" height="1250" id="i7">
+      <img src="images/image7.png" alt="One" width="1250" height="1250" id="i7">
     </div>
     <div id="image8">
-      <img src="images/image8.jpg" alt="One" width="1250" height="1250" id="i8">
+      <img src="images/image8.png" alt="One" width="1250" height="1250" id="i8">
     </div>
     <span class="clear"></span> <!-- this keeps the above elements within the parent div-->
   </div>

sketch.js

@@ -27,44 +27,6 @@ var whichKey = [0,0,0,0,0,0,0,0,0];
 document.addEventListener("DOMContentLoaded", startup); // adding an event listener to the document which fires once the DOM is loaded and then triggers the startup function
 
 function startup() {
-  if (document.images) {   // preload the images for speed - this is a nasty hack to get this working nicely on firefox. I am also using html preload for all other browsers which is better for them
-    img0 = new Image();
-    img0.src = "images/image0.jpg";
-    img0_2 = new Image();
-    img0_2.src = "images/image0_2.jpg";
-    img1 = new Image();
-    img1.src = "images/image1.jpg";
-    img1_2 = new Image();
-    img1_2.src = "images/image1_2.jpg";
-    img2 = new Image();
-    img2.src = "images/image2.jpg";
-    img2_2 = new Image();
-    img2_2.src = "images/image2_2.jpg";
-    img3 = new Image();
-    img3.src = "images/image3.jpg";
-    img3_2 = new Image();
-    img3_2.src = "images/image3_2.jpg";
-    img4 = new Image();
-    img4.src = "images/image4.jpg";
-    img4_2 = new Image();
-    img4_2.src = "images/image4_2.jpg";
-    img5 = new Image();
-    img5.src = "images/image5.jpg";
-    img5_2 = new Image();
-    img5_2.src = "images/image5_2.jpg";
-    img6 = new Image();
-    img6.src = "images/image6.jpg";
-    img6_2 = new Image();
-    img6_2.src = "images/image6_2.jpg";
-    img7 = new Image();
-    img7.src = "images/image7.jpg";
-    img7_2 = new Image();
-    img7_2.src = "images/image7_2.jpg";
-    img8 = new Image();
-    img8.src = "images/image8.jpg";
-    img8_2 = new Image();
-    img8_2.src = "images/image8_2.jpg";
-  }
   for(var i = 0; i < 9; i++) {    // loop through the divs containing images and add event listeners
     var el = document.getElementById("image"+i);
     el.addEventListener("touchstart", handleStart, false);
@@ -486,10 +448,14 @@ synth.set(  // setup the synth - this is audio stuff really
 
 function playSynth(i) {
   synth.triggerAttack(notes[i], Tone.now());
-  document.getElementById(`i${i}`).src=`images/image${i}_2.jpg`; //using template literals to embed expressions within a string
+  //document.getElementById(`i${i}`).src=`images/image${i}_2.jpg`; //using template literals to embed expressions within a string
+  document.getElementById(`i${i}`).style.backgroundColor="magenta";
 }
 
+var col = ["rgb(255, 255, 0)", "rgb(0, 38, 255)", "rgb(0, 255, 42)", "rgb(0, 204, 255)", "rgb(183, 0, 255)", "rgb(255, 136, 0)", "rgb(255, 35, 35)", "rgb(255, 217, 0)", "rgb(119, 0, 255)"]; //colour of button
+
 function stopSynth(i) {
   synth.triggerRelease(notes[i], Tone.now());
-  document.getElementById(`i${i}`).src=`images/image${i}.jpg`;
+  //document.getElementById(`i${i}`).src=`images/image${i}.jpg`;
+  document.getElementById(`i${i}`).style.backgroundColor=col[i];
 }