diff --git a/public/js/add_content.js b/public/js/add_content.js index 35f550d7e524dc7f56ca7dbee0ac7ab93d1b66e7..f087e6330b5d7755b66ce4734e003226e6a56431 100644 --- a/public/js/add_content.js +++ b/public/js/add_content.js @@ -79,15 +79,8 @@ function addcontent(item) { var sdgProjectLink = item.sdgImage; var customColor = '#8A2BE2'; - sdgProjectHTML = `<a class="sdg-button btn btn-sm btn-outline-" style="color: ${customColor}; border-color: ${customColor};" - href="javascript:void(0);" - onclick="toggleImage('${sdgProjectLink}'); changeColor(this, 'lilac');" - onmouseover="hoverEffect(this, 'white', 'lilac');" - onmouseout="hoverEffect(this, '${customColor}', 'white');"> - SDG Projekt - <img id="sdgImage" src="" alt="SDG Project Image" style="max-width: 100%; max-height: 100%; display: none;"> - </a> `; - } + sdgProjectHTML = `<a class="sdg-button btn btn-sm btn-outline-" style="color: white; border-color: ${customColor};" href="javascript:void(0);"onclick="toggleImage('${sdgProjectLink}'); changeColor(this, '${customColor}');" onmouseover="hoverEffect(this, 'lilac', 'white');"onmouseout="hoverEffect(this, '${customColor}', 'white');">SDG Projekt <img id="sdgImage" src="" alt="SDG Project Image" style="max-width: 100%; max-height: 100%; display: none;"></a> `; + } /* var sdgProjectHTML = ''; @@ -214,11 +207,12 @@ function addTeam(item) { } } -function toggleImage(imageLink) { +function toggleImage(imageLink, element) { var imageElement = document.getElementById('sdgImage'); if (imageElement.src === imageLink) { imageElement.src = ''; imageElement.alt = ''; + element.style.backgroundColor = ''; // Reset background color on image hide } else { imageElement.src = imageLink; imageElement.alt = 'SDG Project Image';