onmouseover function() to access all css background-image url() in HTML document?

Question

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?

Why would a css property have an event listener.... You should be binding the event to the element, not the css property — epascarello, Jul 01 '21 at 17:50
@epascarello, I understand what you mean, especially regarding your 2nd sentence. I just needed help in doing so. — Manuel Roads, Jul 01 '21 at 18:26
why? the lines number, the `
` balance, the link from nowhere... — Mister Jojo, Jul 01 '21 at 18:33
You have asked this question *seven* times now. You would benefit hugely from a course on JS basics. — Corey, Jul 01 '21 at 18:45
`getElementsByTagName` returns an `HTMLCollection`, which does not have a `forEach` function. `querySelectorAll` returns a `NodeList`, which does have a `forEach` function. — Heretic Monkey, Jul 01 '21 at 19:11
It seems, if this code actually worked, that when you moused over an element with a background-image, it would navigate to that image. To say that would be an unexpected user experience would be putting it mildly. — Heretic Monkey, Jul 01 '21 at 19:17

score 0 · Answer 1 · answered Jul 01 '21 at 19:25

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.

const elems = document.querySelectorAll("*");
elems.forEach(elem => {
  const bgImg = elem.computedStyleMap().get('background-image');
  if (bgImg.value === 'none') return;
  elem.addEventListener("mouseover", e => {
    console.log(bgImg.toString());
  });
});

#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">

you answer mostly made sense. Sadly there was this error message: "message": "TypeError: elem.computedStyleMap is not a function", — Manuel Roads, Jul 02 '21 at 03:23
@ManuelRoads You have that in you original code... It's [not terribly well supported](https://caniuse.com/mdn-api_element_computedstylemap), Only in Chrome and Chromium-based browsers. — Heretic Monkey, Jul 02 '21 at 12:51
I only used it because you did. So if you need to support other browsers, you need to use `getComputedStyle` https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — epascarello, Jul 02 '21 at 15:55
@epascarello regarding the javascript code you wrote for the mouseover function(), I got this error: "Your file couldn’t be accessed It may have been moved, edited or deleted. ERR_FILE_NOT_FOUND" Why didn't the page navigate to the background image in question? — Manuel Roads, Jul 02 '21 at 17:24
well the property would have `url(https://example.com.foo.gif)` so not sure how it would go to it when it has url() — epascarello, Jul 02 '21 at 17:27
@epascarello isn't the point of location.assign() is to navigate to another page location? I replaced console.log() with location.assign() and still I got that "Err_file_not_found" — Manuel Roads, Jul 03 '21 at 13:11
The string you are going to is `"url(https://example.com.foo.gif)"`.... It is not a valid url.... — epascarello, Jul 06 '21 at 10:47

onmouseover function() to access all css background-image url() in HTML document?

1 Answers1

Linked