将按钮移到网站上的任何图像上使用 Javascript for GreaseMonkey

Question

我为按钮编写了代码，当我按下下一步或后退按钮时它会发出警报。

但问题是这些按钮没有出现在图像上

// ==UserScript==
// @name        Site Cartoon Pages
// @namespace   Amin (AIC)
// @description Buttons to Replace Increase & Decrease Cartoon Page Number 
// @include     http://a.mfcdn.net/store/manga/106/TBD-794.0/compressed/*.jpg
// @version     v2.
// ==/UserScript=

var Green=document.createElement("input");
Green.type="button";
Green.value="Next";
Green.onclick = Next_Page;
Green.setAttribute("style",  "margin: 0; padding: 15px 25px; font-family: Arial, Helvetica, sans-serif;  font-size:30px; outline: none; cursor: pointer;  text-align: center; text-decoration: none; color: #ffffff; top:350px;  right:879px;  position:absolute;   background: #4CAB47;  background: -moz-linear-gradient(top,  #56BF50,  #3F923E);  border: groove 2px #FDD017;   border-top-right-radius: 7px 7px;  border-bottom-right-radius: 7px 7px;   ");
document.body.appendChild(Green);
 
var Red=document.createElement("input");
Red.type="button";
Red.value="Back";
Red.onclick = Back_Page;
Red.setAttribute("style",  "margin: 0; padding: 15px 25px; font-family: Arial, Helvetica, sans-serif;  font-size:30px; outline: none; cursor: pointer;  text-align: center; text-decoration: none; color: #ffffff; top:350px;  right:900px; position:absolute;   background: #D82B2B;  background: -moz-linear-gradient(#F93232,  #AE2424);    border: groove 2px #FDD017;   border-top-left-radius: 7px 7px;  border-bottom-left-radius: 7px 7px;");
document.body.appendChild(Red);

 // Get the number in URL
 var num = document.URL.match(/\d+/g);
 // Get the URL
 var url = document.URL;
 
function Next_Page()
{
 alert("Next");
}

function Back_Page()
{
 alert("Back");
}

<html>
<head></head>
    <body>
        <img class="shrinkToFit decoded" width="324" height="486" src="http://a.mfcdn.net/store/manga/106/TBD-794.0/compressed/p001.jpg" alt="http://a.mfcdn.net/store/manga/106/TBD-794.0/compressed/p001.jpg"></img>
    </body>
</html>

Link图片为：http://a.mfcdn.net/store/manga/106/TBD-794.0/compressed/p001.jpg

我希望这些按钮出现在

所有图片的前面

http://a.mfcdn.net/store/manga/*

所以请帮助我，让按钮一直在图像上移动。

此致

Answer 1

// ==UserScript==
// @name        Site Cartoon Pages
// @namespace   Amin (AIC)
// @description Buttons to Replace Increase & Decrease Cartoon Page Number 
// @include     http://a.mfcdn.net/store/manga/*.jpg
// @version     2
// @grant       none
// ==/UserScript==

var COMMON_CSS = "padding: 15px 25px; font-family: Arial, Helvetica, sans-serif;" +
 " font-size: 30px; cursor: pointer; text-decoration: none; color: #FFFFFF;" +
 " position: absolute; border: 2px groove #FDD017; bottom: 10px;";

var images = document.getElementsByTagName("img");
if(images && images[0]) {
    images[0].style.position = "static";
    document.body.style.textAlign = "center";
    var green = document.createElement("a");
    green.innerHTML = "Next";
    green.onclick = function() {alert("Next");};
    green.style.cssText = COMMON_CSS + " right: 10px; border-radius: 0px 7px 7px 0px;" +
     " background-color: #4CAB47; background-image: -moz-linear-gradient(top, #56BF50, #3F923E);";
    var red = document.createElement("a");
    red.innerHTML = "Back";
    red.onclick = function() {alert("Back");};
    red.style.cssText = COMMON_CSS + " left: 10px; border-radius: 7px 0px 0px 7px;" +
     " background-color: #D82B2B; background-image: -moz-linear-gradient(#F93232, #AE2424);";
    var container = document.createElement("div");
    container.style.cssText = "position: relative; display: inline-block;";
    container.appendChild(green);
    container.appendChild(red);
    container.appendChild(images[0]);
    document.body.appendChild(container);
}

将按钮移到网站上的任何图像上使用 Javascript for GreaseMonkey

Move a button over any images on the website Using Javascript for GreaseMonkey

javascript

greasemonkey

image

button

将按钮移到网站上的任何图像上 使用 Javascript for GreaseMonkey

Move a button over any images on the website Using Javascript for GreaseMonkey

javascript

greasemonkey

image

button

将按钮移到网站上的任何图像上使用 Javascript for GreaseMonkey