Update public/js/add_content.js

public/js/add_content.js

@@ -84,11 +84,22 @@ function addcontent(item) {
     //-- debut
     var sdgProjectHTML = '';
     if ('sdgImage' in item) {
-      var sdgProjectLink = item.sdgImage;
-      var customColor = '#8A2BE2';
-      var imageSize = '5px'; // Adjust this value to your desired size
-
-      sdgProjectHTML = `<a class="btn btn-sm btn-outline- mt-1" style="color: ${customColor}; border-color: ${customColor};" href="javascript:void(0);" onclick="document.querySelector('.btn-outline- img').src='${sdgProjectLink}'; document.querySelector('.btn-outline- img').alt='SDG Project Image'; document.querySelector('.btn-outline- img').style.max-width='${imageSize}'; document.querySelector('.btn-outline- img').style.max-height='${imageSize}'; document.querySelector('.btn-outline- img').onclick=function(){window.open('${sdgProjectLink}', '_blank');}"><img src="imgs/thumbnails/SDG-HFT.png" alt="SDG Project Image" class="btn-outline-"></a> &nbsp;`;
+    var sdgProjectLink = item.sdgImage;
+    var customColor = '#8A2BE2';
+    var imageSize = '5px'; // Adjust this value to your desired size
+
+    sdgProjectHTML = `<a class="btn btn-sm btn-outline- mt-1" style="color: ${customColor}; border-color: ${customColor};" href="javascript:void(0);" onclick="changeImage('${sdgProjectLink}')"><img src="imgs/thumbnails/SDG-HFT.png" alt="SDG Project Image" class="btn-outline-" style="max-width: ${imageSize}; max-height: ${imageSize};"></a> &nbsp;`;
+
+    // Add a JavaScript function to change the image and open the link
+    sdgProjectHTML += `
+    <script>
+        function changeImage(sdgProjectLink) {
+            var img = document.querySelector('.btn-outline- img');
+            img.src = sdgProjectLink;
+            img.alt = 'SDG Project Image';
+            window.open(sdgProjectLink, '_blank');
+        }
+    </script>`;
     }
 
     //-- fin (new idea)