在鼠标悬停时替换部分URL，以获取原始大小的图像

Question

For Violentmonkey or Greasemonkey.

I want to replace part of a URL during mouse hover , so that I could copy to memory the original size of the image instead of the provided one. The image URL patterns are constant. The desired texts to be replaced are always on the same locations, perhaps like a template.

Example of a blogspot.com page:

https://hopedogrescue.blogspot.com/2019/06/what-you-need-to-know-about-canine.html

Example of an image URL from the above page:

https://1.bp.blogspot.com/-k-J3eJs1nH0/XQg9ZTO9i2I/AAAAAAAAVXI/MJijXqZxrLQt9xmoK-mHlAJPrtFe7SM4ACLcBGAs/s1600/matthieu%2Bserious.jpg

Example of the image URL from above, now s1600 is changed to s0 :

https://1.bp.blogspot.com/-k-J3eJs1nH0/XQg9ZTO9i2I/AAAAAAAAVXI/MJijXqZxrLQt9xmoK-mHlAJPrtFe7SM4ACLcBGAs/s0/matthieu%2Bserious.jpg

If I am in a forum or whatever page, I want whatever existing image posted there by a User as it was. I want the URL for the image's original size during mouse hover, so that I could save internet data. My downloader will intercept the image's URL from memory when copied. Hence, I could repeatedly revisit the forum/page with its existing images as they were.

So far, the s1600 is not changed to s0 during mouse hover.

// ==UserScript==
// @name        My orig image sizes
// @description Get orig image sizes.
// @namespace   My monkey scripts
// @version     1.0
// @grant       none
// @match       *://*.blogspot.com/*
// @run-at      document-start
// ==/UserScript==

document.addEventListener("mouseover", myFunction);

function myFunction() {
  var url = 'https:\/\/.\.bp.blogspot.com\/.\/.\/.\/.\/s1600\/.\.jpg'
  url = url.replace('s1600','s0')
}

Answer 1

You could handle this by DOM references, which is actually how JavaScript works when it has to modify or reference the DOM.

 const images = document.querySelectorAll("img"); let imagesData = []; images.forEach((i,x)=>{ imagesData.push(i.src); //Saves every DOM reference of an img tag i.addEventListener("mouseover", ()=>{toggleImage(x,true);}); i.addEventListener("mouseout", ()=>{toggleImage(x,false);}); }); function toggleImage(e,h) { images[e].src = h ? "//placehold.it/150/00F/FFF/?text=Hover" : imagesData[e]; } 

 <img id="img1" src="//placehold.it/150/600/FFF/?text=Image 1"> <img id="img2" src="//placehold.it/150/A00/FFF/?text=Image 2"> <img id="img3" src="//placehold.it/150/F00/FFF/?text=Image 3"> <img id="img4" src="//placehold.it/150/C00/FFF/?text=Image 4"> 

Note : If you want to replace a specific url depending on the previous one, you can get it with images[e].src inside toggleImage function.