<style>
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
background-image: url(“https://websiteholland.nl/wp-content/uploads/2023/01/flame_k_ovaal_e2.png”);
background-repeat: no-repeat;
background-position: center center;
}
</style>
<img id=”tofImageId” src=”https://websiteholland.nl/wp-content/uploads/2023/01/alleKleuren-1.png” alt=”Waar is tie?” width=”100%” height=”737″ style=”display:none”>
<canvas id=”tofCanvasId” width=”2250″ height=”737″ style=”border:0px”></canvas>
<script>
let tofMI8 = document.querySelector(“.main-navigation .primary-menu-container > ul > li.menu-item-8 > a”);
tofMI8.style.filter = “invert(100%)”;
let tofMI10 = document.querySelector(“.main-navigation .primary-menu-container > ul > li.menu-item-10 > a”);
tofMI10.style.filter = “invert(100%)”;
let tofMI11 = document.querySelector(“.main-navigation .primary-menu-container > ul > li.menu-item-11 > a”);
tofMI11.style.filter = “invert(100%)”;
let tofMI9 = document.querySelector(“.main-navigation .primary-menu-container > ul > li.menu-item-9 > a”);
tofMI9.style.filter = “invert(100%)”;
var tofCanvas = document.getElementById(“tofCanvasId”);
var tofCanvasContext = tofCanvas.getContext(“2d”, {willReadFrequently: true});
var tofImage = document.getElementById(“tofImageId”);
tofCanvasContext.drawImage(tofImage, 0, 0);
let imgData = tofCanvasContext.getImageData(1000, 30, 1, 1);
let imgCol = (‘rgba(‘ + imgData.data[0] + ‘, ‘ + imgData.data[1]+ ‘, ‘ + imgData.data[2] + ‘, ‘ + imgData.data[3] + ‘)’);
let posElem = imageSection.offsetTop;
let posEndElem = (imageSection.offsetTop + imageSection.offsetHeight)-90;
let tofEsFP = document.elementsFromPoint(300,40);
tofMI8.style.color = ‘black’;
tofMI9.style.color = ‘black’;
tofMI10.style.color = ‘black’;
tofMI11.style.color = ‘black’;
let swFound = “0”;
let swCounter = 0;
window.onscroll = function(){
if ((this.oldScroll > posElem)&&(this.oldScroll < posEndElem)) {
imgData = tofCanvasContext.getImageData(1000, (this.oldScroll – (posElem-28)), 1, 1);
imgCol = (‘rgba(‘ + imgData.data[0] + ‘, ‘ + imgData.data[1]+ ‘, ‘ + imgData.data[2] + ‘, ‘ + imgData.data[3] + ‘)’);
tofMI8.style.color = imgCol;
tofMI9.style.color = imgCol;
tofMI10.style.color = imgCol;
tofMI11.style.color = imgCol;
} else {
tofEsFP = document.elementsFromPoint(300,40);
swFound = “0”;
swCounter = 0;
for (let i = 0; i < tofEsFP.length; i++) {
foundClr = window.getComputedStyle(tofEsFP[i])[“backgroundColor”]
if (foundClr == ‘rgba(0, 0, 0, 0)’) {
// niks
} else if (foundClr == ‘rgb(255, 255, 255)’) {
swCounter = swCounter + 1;
} else if (foundClr == ‘rgb(247, 250, 252)’) {
// niks
} else if (foundClr == ‘rgba(255, 125, 0, 0.1)’) {
// niks
} else {
tofMI8.style.color = foundClr;
tofMI9.style.color = foundClr;
tofMI10.style.color = foundClr;
tofMI11.style.color = foundClr;
swFound = “1”;
}}
if (swFound == “0”) {
tofMI8.style.color = ‘black’;
tofMI9.style.color = ‘black’;
tofMI10.style.color = ‘black’;
tofMI11.style.color = ‘black’;
}
if (swCounter > 1) {
tofMI8.style.color = ‘white’;
tofMI9.style.color = ‘white’;
tofMI10.style.color = ‘white’;
tofMI11.style.color = ‘white’;
}
}
this.oldScroll = this.scrollY;
}
</script>