const bg = document.getElementsByTagName("*");
bg.forEach(bgi => {
const b = bgi.computedStyleMap();
const c = b.get('background-image');
c.addEventListener("mouseover", e => {
const img = e.target.c;
if (c) location.assign(c);
});
});#n {
background-position: 40% 45%;
}
.rap {
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra {
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
bottom: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os {
height: 4350px;
width: 100%;
opacity: 0;
background-color: slategrey;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg");
width: 2820 px;
height: 2050 px;
background-position-y: 80%;
background-repeat: no-repeat;
background-color: azure;
}<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423" style="float:left">
<p>
<div class="rap"></div>
</p>
<p>
<div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div>
</p>
<img src="https://i.ibb.co/YjG8SgN/SG8ZEag.png" alt="guy" id="ki" width="367" height="644" style="float:left; position: absolute; left:930px; top:431px">
<img src="https://i.pinimg.com/originals/8f/a7/b9/8fa7b999f20538fe753013f69a8f441c.jpg" width="433" height="580" style="float:left; position: absolute; left:1300px; top:431px">
<img src="https://i.pinimg.com/originals/82/59/86/82598611fcf7003ca9cbd146085c3c1e.jpg" width="362" height="453" style="float:left; position: absolute; left:560px; top:431px">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" style="float:left; position: absolute; left:300px">
<div class="os"></div>
<div class="ra"></div>
<p>
<div class="ra" style="float:left; position: absolute; left:1900px; top:4798px"></div>
</p>
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:16px">
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:350px">Basically, I'm trying to assign a mouseover function() for all background-image url()'s on an HTML document. I want to be able to access/trigger each background-image url(), as though it were clicking an href link, when I mouseover one.
I attempted to apply CSSImageValue, a subset of CSS Object Model (CSSOM). How do I get this code to work?
I am unsure what you are trying to accomplish, but you have many basic concepts wrong.
Below will select all the elements. It loops over the NodeList and checks to see if the element has the computed style. If it does not, it just ignores it. If it does, it adds an event listener to the element. When you mouse over the element, it logs the background image value.
Note: I did not fix the invalid HTML.