0

I have two problems with this Javascript code. (credit to redditor u/Symboltic for suggesting to me the javascript code here. I appreciate his recommendation, just want to make it more applicable and versatile for more coding situations)

1st problem:

While the following javascript code does function, to go over to a background-image: url() via mouseover, unfortunately, mouseover on that 's background-color, or blank area in general, also goes over to the background-image:url().

For tags, how do I enable mouseover function(), which goes to the background-image:url(), when mouse is only on the background-image for the element?

2nd problem:

mouseover on the tag somehow does not go over to the background-images:url(), when I mouseover on the background-images in tag. Only rarely does this happen, if at all.

I'd like for this mouseover to be able to go to the background-images link in the body tag when the mouseover is on any of the the background-image: url()'s. (Regardless of how many background-image: url()'s that I might put in in the future.

Thanks for all your helpful answers.

Javascript code

document.addEventListener('mouseover', ({ target }) => {
const { backgroundImage } = getComputedStyle(target);      

if (!backgroundImage.startsWith('url(')) return
      
let extractedUrl = backgroundImage         
    .slice(4, -1)         
.replace(/^["']|["']$/g, '');   
   
location.assign(extractedUrl); 
});

HTML code:

 <style>

#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%;
    
    background-repeat: no-repeat;
background-color: slategrey;

}

.os{
    height: 5000px;
     width: 9000px;
  
     
}
        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"), 
  url("https://i.ibb.co/1KL4Kdj/op.png");
  width: 2820px, 1920px;
  height: 2050px, 1080px;
  background-position-y: 35%, 4%; 
  background-position-x: 0%, -3500%;
  background-repeat: no-repeat;
  background-color: azure;
}


    </style>
</head>
<body>
    <img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"
    style="float:left; position: absolute; left:7800px; top:60px;">
    <img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" 
    style="float:left">
    <img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
    style="float:left">
    <img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"
    style="float:left; position: absolute; left:5000px; top:7000px;">>
    

   
   <p><div class="rap"></div></p>
  
   
   
    
   <div class="os"></div>
  
        
    
        

<div class="ra"></div>
    
   
    
  
    
   
</body>
Manuel Roads
  • 1
  • 3
  • You have now asked this question eight times. – Corey Jul 06 '21 at 06:19
  • Does this answer your question? [onmouseover function() to access all css background-image url() in HTML document?](https://stackoverflow.com/questions/68214795/onmouseover-function-to-access-all-css-background-image-url-in-html-document) – Corey Jul 06 '21 at 06:20
  • unfortunately not. I tried that code, and unfortunately I had an error claiming : "file not found" – Manuel Roads Jul 06 '21 at 07:47

0 Answers0