Change image number style to bold non-italic

To match figure and listing styles.

In addition, I caught and corrected all images with class 'pixel'. We
specified the class, but neglected to quote the class value in the HTML
markup.

Resolves RayTracing#1009

Author: hollasch

books/RayTracingInOneWeekend.html

@@ -165,7 +165,8 @@
 Opening the output file (in `ToyViewer` on my Mac, but try it in your favorite viewer and Google
 “ppm viewer” if your viewer doesn’t support it) shows this result:
 
-  ![Image 1: First PPM image](../images/img-1.01-first-ppm-image.png class=pixel)
+  ![<span class='num'>Image 1:</span> First PPM image
+    ](../images/img-1.01-first-ppm-image.png class='pixel')
 
 Hooray! This is the graphics “hello world”. If your image doesn’t look like that, open the output
 file in a text editor and see what it looks like. It should start something like this:
@@ -624,8 +625,8 @@
 <div class='together'>
 In our case this produces:
 
-  ![Image 2: A blue-to-white gradient depending on ray Y coordinate
-  ](../images/img-1.02-blue-to-white.png class=pixel)
+  ![<span class='num'>Image 2:</span> A blue-to-white gradient depending on ray Y coordinate
+  ](../images/img-1.02-blue-to-white.png class='pixel')
 
 </div>
 
@@ -752,7 +753,8 @@
 <div class='together'>
 What we get is this:
 
-  ![Image 3: A simple red sphere](../images/img-1.03-red-sphere.png class=pixel)
+  ![<span class='num'>Image 3:</span> A simple red sphere
+  ](../images/img-1.03-red-sphere.png class='pixel')
 
 </div>
 
@@ -827,8 +829,8 @@
 <div class='together'>
 And that yields this picture:
 
-  ![Image 4: A sphere colored according to its normal vectors
-  ](../images/img-1.04-normals-sphere.png class=pixel)
+  ![<span class='num'>Image 4:</span> A sphere colored according to its normal vectors
+  ](../images/img-1.04-normals-sphere.png class='pixel')
 
 </div>
 
@@ -1350,8 +1352,8 @@
 This yields a picture that is really just a visualization of where the spheres are along with their
 surface normal. This is often a great way to look at your model for flaws and characteristics.
 
-  ![Image 5: Resulting render of normals-colored sphere with ground
-  ](../images/img-1.05-normals-sphere-ground.png class=pixel)
+  ![<span class='num'>Image 5:</span> Resulting render of normals-colored sphere with ground
+  ](../images/img-1.05-normals-sphere-ground.png class='pixel')
 
 
 An Interval Class
@@ -1860,8 +1862,8 @@
 <div class='together'>
 Zooming into the image that is produced, we can see the difference in edge pixels.
 
-  ![Image 6: Before and after antialiasing
-  ](../images/img-1.06-antialias-before-after.png class=pixel)
+  ![<span class='num'>Image 6:</span> Before and after antialiasing
+  ](../images/img-1.06-antialias-before-after.png class='pixel')
 
 </div>
 
@@ -2024,8 +2026,8 @@
 <div class='together'>
 ... Indeed we do get rather nice gray spheres:
 
-  ![Image 7: Rendering of diffuse spheres with hemispherical scattering
-  ](../images/img-1.10-rand-hemispherical.png class=pixel)
+  ![<span class='num'>Image 7:</span> Rendering of diffuse spheres with hemispherical scattering
+  ](../images/img-1.10-rand-hemispherical.png class='pixel')
 
 </div>
 
@@ -2121,7 +2123,8 @@
 <div class='together'>
 For this very simple scene we should get basically the same result:
 
-  ![Image 8: First render of a diffuse sphere](../images/img-1.07-first-diffuse.png class=pixel)
+  ![<span class='num'>Image 8:</span> First render of a diffuse sphere
+  ](../images/img-1.07-first-diffuse.png class='pixel')
 
 </div>
 
@@ -2183,8 +2186,8 @@
 <div class='together'>
 This yields light grey, which is more accurate:
 
-  ![Image 9: Diffuse sphere, with gamma correction
-  ](../images/img-1.08-gamma-correct.png class=pixel)
+  ![<span class='num'>Image 9:</span> Diffuse sphere, with gamma correction
+  ](../images/img-1.08-gamma-correct.png class='pixel')
 
 </div>
 
@@ -2299,8 +2302,8 @@
 <div class='together'>
 After rendering we get a similar image:
 
-  ![Image 10: Correct rendering of Lambertian spheres
-  ](../images/img-1.09-correct-lambertian.png class=pixel)
+  ![<span class='num'>Image 10:</span> Correct rendering of Lambertian spheres
+  ](../images/img-1.09-correct-lambertian.png class='pixel')
 
 </div>
 
@@ -2649,7 +2652,8 @@
 <div class='together'>
 Which gives:
 
-  ![Image 11: Shiny metal](../images/img-1.11-metal-shiny.png class=pixel)
+  ![<span class='num'>Image 11:</span> Shiny metal
+  ](../images/img-1.11-metal-shiny.png class='pixel')
 
 </div>
 
@@ -2712,7 +2716,8 @@
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     [Listing [metal-fuzz-spheres]: <kbd>[main.cc]</kbd> Metal spheres with fuzziness]
 
-  ![Image 12: Fuzzed metal](../images/img-1.12-metal-fuzz.png class=pixel)
+  ![<span class='num'>Image 12:</span> Fuzzed metal
+  ](../images/img-1.12-metal-fuzz.png class='pixel')
 
 </div>
 
@@ -2731,7 +2736,8 @@
 there is a refraction ray at all. For this project, I tried to put two glass balls in our scene, and
 I got this (I have not told you how to do this right or wrong yet, but soon!):
 
-  ![Image 13: Glass first](../images/img-1.13-glass-first.png class=pixel)
+  ![<span class='num'>Image 13:</span> Glass first
+  ](../images/img-1.13-glass-first.png class='pixel')
 
 Is that right? Glass balls look odd in real life. But no, it isn’t right. The world should be
 flipped upside down and no weird black stuff. I just printed out the ray straight through the middle
@@ -2843,8 +2849,8 @@
 <div class='together'>
 This gives us the following result:
 
-  ![Image 14: Glass sphere that always refracts
-  ](../images/img-1.14-glass-always-refract.png class=pixel)
+  ![<span class='num'>Image 14:</span> Glass sphere that always refracts
+  ](../images/img-1.14-glass-always-refract.png class='pixel')
 
 </div>
 
@@ -2964,8 +2970,8 @@
 <div class='together'>
 We get:
 
-  ![Image 15: Glass sphere that sometimes refracts
-  ](../images/img-1.15-glass-sometimes-refract.png class=pixel)
+  ![<span class='num'>Image 15:</span> Glass sphere that sometimes refracts
+  ](../images/img-1.15-glass-sometimes-refract.png class='pixel')
 
 </div>
 
@@ -3044,7 +3050,8 @@
 <div class='together'>
 This gives:
 
-  ![Image 16: A hollow glass sphere](../images/img-1.16-glass-hollow.png class=pixel)
+  ![<span class='num'>Image 16:</span> A hollow glass sphere
+  ](../images/img-1.16-glass-hollow.png class='pixel')
 
 </div>
 
@@ -3147,7 +3154,8 @@
 <div class='together'>
 This gives us the rendering:
 
-  ![Image 17: A wide-angle view](../images/img-1.17-wide-view.png class=pixel)
+  ![<span class='num'>Image 17:</span> A wide-angle view
+  ](../images/img-1.17-wide-view.png class='pixel')
 
 </div>
 
@@ -3261,7 +3269,8 @@
 <div class='together'>
 to get:
 
-  ![Image 18: A distant view](../images/img-1.18-view-distant.png class=pixel)
+  ![<span class='num'>Image 18:</span> A distant view
+  ](../images/img-1.18-view-distant.png class='pixel')
 
 </div>
 
@@ -3278,7 +3287,7 @@
 <div class='together'>
 to get:
 
-  ![Image 19: Zooming in](../images/img-1.19-view-zoom.png class=pixel)
+  ![<span class='num'>Image 19:</span> Zooming in](../images/img-1.19-view-zoom.png class='pixel')
 
 </div>
 
@@ -3451,7 +3460,8 @@
 <div class='together'>
 We get:
 
-  ![Image 20: Spheres with depth-of-field](../images/img-1.20-depth-of-field.png class=pixel)
+  ![<span class='num'>Image 20:</span> Spheres with depth-of-field
+  ](../images/img-1.20-depth-of-field.png class='pixel')
 
 </div>
 
@@ -3536,7 +3546,7 @@
 <div class='together'>
 This gives:
 
-  ![Image 21: Final scene](../images/img-1.21-book1-final.jpg)
+  ![<span class='num'>Image 21:</span> Final scene](../images/img-1.21-book1-final.jpg)
 
 </div>