Added multiple image support per box

README.md

@@ -1,10 +1,18 @@
 [YouTube video](https://www.youtube.com/watch?v=sIdqMQTGNSc)
 
+Instructions
 1. Just download the two files from the Github repository (hamdash.html and wheelzoom.js) and keep them together on the same folder.
 2. Open hamdash.html with any browser of your preference and you done.
-3. With any text editor (like Notepad) you can change the source images or the menu options.
+3. With any text editor (like Notepad) you can change the source images (can be more than one per box) or the menu options.
+
+Quick Help
+* Double click on an image to expand to full screen.
+* Double click again to close full screen view.
+* Right click on an image to display the next one. (In the latest version is possible to add multiple images per box.)
+* The content refreshes automatically every 5 minutes.
 
 Is that easy!
+
 73
 
 ![VA3HDL Sample Dashboard](https://github.com/VA3HDL/hamdashboard/blob/main/dashboard_sample.png?raw=true)

hamdash.html

@@ -267,8 +267,9 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
         "https://services.swpc.noaa.gov/images/animations/d-rap/global/d-rap/latest.png",
       ],
       [
-        "ISS POSITION",
+        "ISS & RS-44 POSITION",
         "https://www.heavens-above.com/orbitdisplay.aspx?icon=iss&width=600&height=300&mode=M&satid=25544",
+        "https://www.heavens-above.com/orbitdisplay.aspx?icon=default&width=600&height=300&mode=M&satid=44909",
       ],
       [
         "SATELLITE CAN",
@@ -292,14 +293,14 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
         "https://www.short-wave.info/php/transmitter-site-map.php?mobile=false&lat=52.67|-21.96|-15.53|-9.42|-17.76|-17.53|46.34|50.73|42.81|39.75|50.89|29.60|6.23|39.40|-15.53|43.51|46.34|-21.96|34.38|44.15|39.36|46.34|39.91|39.91|46.34|27.46|24.88|27.46|36.28|39.36|42.04|36.28|36.21|12.69|18.22|24.17|42.04|29.60|-15.73|-7.90|36.21|12.69|36.21|29.15|30.65|-21.96|33.50|-38.83|36.28|36.21|27.46&lon=9.75|27.60|28.00|160.05|168.36|146.05|-67.83|4.39|23.19|116.81|-113.85|55.79|-10.70|32.86|28.00|-79.63|-67.83|27.64|108.61|86.90|75.72|-67.83|-76.58|-76.58|-67.83|-80.93|102.50|-80.93|-86.10|75.72|12.32|-86.10|-86.89|-8.02|-63.02|54.25|12.32|55.79|46.45|-14.38|-86.89|-8.02|-86.89|47.77|-87.09|27.64|-86.47|176.42|-86.10|-86.89|-80.93&freq=3975|4930|4965|5020|5040|5055|5130|5780|5900|5985|6030|6040|6050|6050|6065|6070|6160|6195|7285|7295|7415|7490|9265|9265|9330|9395|9440|9455|9475|9600|9705|9930|9980|11640|11775|11810|11870|11880|11965|12095|12160|13630|13845|15540|15555|15580|15610|15720|15810|15825|17790&az=ND|20|ND|ND|ND|ND|245|ND|126|257|ND|313|ND|310|315|ND|245|350|317|270|308|245|242|242|245|355|283|285|50|308|206|180|90|111|320|90|210|211|295|27|85|111|90|310|5|350|85|35|40|46|160",
       ],
       ["10M PROPAGATION", "https://www.tvcomm.co.uk/g7izu/Autosave/NA_ES_AutoSave.JPG"],
-      ["HF PROPAGATION", "https://www.hamqsl.com/solarpich.php"],
+      ["HF PROPAGATION",
+      "https://www.hamqsl.com/solar101vhf.php",
+      "https://www.hamqsl.com/solar100sc.php",
+      "https://www.hamqsl.com/solarpich.php"],
     ];
 
-    // https://www.hamqsl.com/solar100sc.php
-    // https://www.hamqsl.com/solarbc.php
-    // https://www.hamqsl.com/solarpich.php
-
     var largeShow = 0;
+    var aIdx = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
 
     // This function shows the embedded websites
     function MenuOpt(num) {
@@ -315,6 +316,7 @@ db   8D Y8b  d8 88 `88.   .88.   88         88    db   8D
       } else if (num == 2) {
         alert(`Double click on an image to expand to full screen.
 Double click again to close full screen view.
+Right click on an image to display the next one.
 The content refreshes automatically every 5 minutes.
 `);
       }
@@ -338,6 +340,19 @@ The content refreshes automatically every 5 minutes.
       }
     }
 
+    function rotate(event) {
+      event.preventDefault();
+      var targetElement = event.target || event.srcElement;
+      i = +targetElement.id.match(/\d+/)[0];
+      if (aIMG[i].length > 2) {
+        ++aIdx[i];
+        if (aIdx[i] > aIMG[i].length - 1) {
+          aIdx[i] = 1;
+        }
+        document.getElementById(targetElement.id).src = aIMG[i][aIdx[i]];
+      }
+    }
+
     function start() {
       // Get the parent div for Menu container
       var parentDiv = document.getElementById("myMenu");
@@ -364,6 +379,7 @@ The content refreshes automatically every 5 minutes.
         var newImg = document.createElement("img");
         newImg.id = `"Image${index}"`;
         newImg.src = innerArray[1];
+        newImg.oncontextmenu = rotate;
         newImg.ondblclick = larger;
         parentDiv.appendChild(newDiv);
         newDiv.appendChild(newImg);