Html 如何添加整页大小的背景链接？_Html

Html 如何添加整页大小的背景链接？

html

Html 如何添加整页大小的背景链接？,html,Html,我已经做了一个网页，让我可以访问很多很好的网站，所以我不必键入所有的链接我想在我的网站www.x3mismusic.eu上使用这个页面作为所有歌曲的索引，但是由于没有主页按钮的位置，我想让整个页面作为链接点击。我这样做是为了，无论何时使用shift+x链接，都将被禁用，以便您可以通过按钮单击。然而，即使我把一个链接放在背景上，它也不会显示出来，也不会工作我尝试在主体周围放置一个链接（锚定标记），创建第二个带有链接的包装，我甚至尝试在主体中使用JavaScript“onclick”标记，但这并

我已经做了一个网页，让我可以访问很多很好的网站，所以我不必键入所有的链接

我想在我的网站www.x3mismusic.eu上使用这个页面作为所有歌曲的索引，但是由于没有主页按钮的位置，我想让整个页面作为链接点击。我这样做是为了，无论何时使用shift+x链接，都将被禁用，以便您可以通过按钮单击。然而，即使我把一个链接放在背景上，它也不会显示出来，也不会工作

我尝试在主体周围放置一个链接（锚定标记），创建第二个带有链接的包装，我甚至尝试在主体中使用JavaScript“onclick”标记，但这并没有像我所希望的那样工作，因为onclick使我无法使用我创建的按钮链接

我在网上冲浪很久了，但找不到任何原因或解决方案来解释为什么这个链接不起作用。有人能帮我把背景设置成可点击的链接，同时还能激活按钮链接吗

我不擅长在这里格式化代码，所以我会有一个指向代码的JSFIDLE链接。以下是链接：

你在那里您不应该有多个具有相同值的

id

现在来问你的问题

<html>
<head>
    <style type="text/css">
        .disableMenu {
            pointer-events:none;
        }
        .x {
            background-color:#000;
            color:#600;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #600;
            text-align:center;
            float:left;
        }
        .x:hover {
            background-color:#000;
            color:#0a0;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #0a0;
            text-align:center;
            float:left;
        }
        a {
            color:#fff;
            text-decoration:none;
        }
        a:hover {
            color:#b89200;
            text-decoration:none;
        }
        body {
            background:linear-gradient(to bottom right, #123264, #606);
            color:#b89200;
            width:100%;
            height:100%;
            position:absolute;
            margin:0;
            padding:0;
        }
        #wrapper {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
        #wrapper2 {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
    <div id="wrapper"> 
        <span class="x">
            <b>
                youtubeX
            </b>
        </span>
        </a> 
        <a href="http://www.lunagang.nl" target="_blank" title="lunagang">
            <span class="x">
                <b>
                    lunagang
                </b>
            </span>
        </a>
        <a href="http://www.facebook.com" target="_blank" title="facebook">
            <span class="x">
                <b>
                    facebook
                </b>
            </span>
        </a>
        <a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct                   admin">
            <span class="x">
                <b>
                    direct admin
                </b>
            </span>
        </a>

        <a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
            <span class="x">
                <b>
                    squirrelmail
                </b>
            </span>
        </a>

        <a href="http://www.runescape.com" target="_blank" title="runescape">
            <span class="x">
                <b>
                    runescape
                </b>
            </span>
        </a>

        <a href="http://www.google.com" target="_blank" title="google">
            <span class="x">
                <b>
                    google
                </b>
            </span>
        </a>

        <a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
            <span class="x">
                <b>
                    x3mis music
                </b>
            </span>
        </a>

        <a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
            <span class="x">
                <b>
                    game-vortex
                </b>
            </span>
        </a>

        <a href="http://www.outlook.com" target="_blank" title="outlook">
            <span class="x">
                <b>
                    outlook
                </b>
            </span>
        </a>
    </div>
</body>
<script type="text/javascript">
    function NNKeyCap(thisOne) {
     if (thisOne.modifiers & Event.SHIFT_MASK) {
         if (thisOne.which == 88) {
             var x = document.querySelectorAll(".x");
             x.forEach(function(element){
                element.classList.add("disableMenu");
             });                     
         }
     }
    }

    function IEKeyCap() {
     if (window.event.shiftKey) {
         if (window.event.keyCode == 88) {
             var x = document.querySelector("#wrapper");
             x.classList.add("disableMenu");
         }
     }
    }

    if (navigator.appName == 'Netscape') {
     window.captureEvents(Event.KEYPRESS);
     window.onKeyPress = NNKeyCap;
    }

    function myFunction() {
        var x = document.querySelector("#wrapper");
        x.classList.remove("disableMenu");
    }

    function myClickEvent(body)
    {
        var childDiv = body.querySelector('#wrapper');
        var hasClass = childDiv.classList.contains('disableMenu');
        if(hasClass)
        {
            document.location = 'http://www.google.com'; <!-- your background link here -->
        }
    }
</script>
</html>


.残疾菜单{
指针事件：无；
}
.x{
背景色：#000；
颜色：#600；
左侧填充：50px；
右边填充：50px；
垫面：5px；
垫底：5px；
边框：3倍实心#600；
文本对齐：居中；
浮动：左；
}
.x:悬停{
背景色：#000；
颜色：#0a0；
左侧填充：50px；
右边填充：50px；
垫面：5px；
垫底：5px；
边框：3px实心#0a0；
文本对齐：居中；
浮动：左；
}
a{
颜色：#fff；
文字装饰：无；
}
a:悬停{
颜色：#b89200；
文字装饰：无；
}
身体{
背景：线性渐变（右下角，#123264，#606）；
颜色：#b89200；
宽度：100%；
身高：100%；
位置：绝对位置；
保证金：0；
填充：0；
}
#包装纸{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0%；
最高：0%；
保证金：0；
填充：0；
}
#包装2{
宽度：100%；
身高：100%；
位置：绝对位置；
左：0%；
最高：0%；
保证金：0；
填充：0；
}
youtubeX
功能NNKeyCap（此功能）{
if（thisOne.modifiers和Event.SHIFT\u掩码）{
if（thisOne.which==88）{
var x=document.queryselectoral（“.x”）；
x、 forEach（函数（元素）{
元素。类列表。添加（“禁用菜单”）；
});                     
}
}
}
函数IEKeyCap（）{
if（window.event.shiftKey）{
if（window.event.keyCode==88）{
var x=document.querySelector（“包装器”）；
x、 类列表。添加（“禁用菜单”）；
}
}
}
如果（navigator.appName=='Netscape'）{
window.captureEvents（Event.KEYPRESS）；
window.onKeyPress=NNKeyCap；
}
函数myFunction（）{
var x=document.querySelector（“包装器”）；
x、 类列表。删除（“禁用菜单”）；
}
函数myClickEvent（正文）
{
var childDiv=body.querySelector（“#包装器”）；
var hasClass=childDiv.classList.contains（'disableMenu'）；
如果（hasClass）
{
document.location=http://www.google.com'; 
}
}

在这里，我删除了body标记中的

onkeyup=“myFunction（）”

，因为它正在删除

IEKeyCap添加的disableMenu
类
并添加了myClickEvent
，该事件检查#wrapper
是否具有类禁用菜单

如果它有禁用菜单
，则它将被重定向到您分配给文档的链接。位置

希望这对你有所帮助我已经把这个问题从一篇小写的帖子整理成了一篇可读性更强的帖子。然而，如果你能将这些问题复制回你的问题中，这是值得赞赏的——对代码的要求是专门阻止只使用小提琴的帖子。请不要绕开规则——它们存在是有原因的！
<html>
<head>
    <style type="text/css">
        .disableMenu {
            pointer-events:none;
        }
        .x {
            background-color:#000;
            color:#600;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #600;
            text-align:center;
            float:left;
        }
        .x:hover {
            background-color:#000;
            color:#0a0;
            padding-left:50px;
            padding-right:50px;
            padding-top:5px;
            padding-bottom:5px;
            border:3px solid #0a0;
            text-align:center;
            float:left;
        }
        a {
            color:#fff;
            text-decoration:none;
        }
        a:hover {
            color:#b89200;
            text-decoration:none;
        }
        body {
            background:linear-gradient(to bottom right, #123264, #606);
            color:#b89200;
            width:100%;
            height:100%;
            position:absolute;
            margin:0;
            padding:0;
        }
        #wrapper {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
        #wrapper2 {
            width:100%;
            height:100%;
            position:absolute;
            left:0%;
            top:0%;
            margin:0;
            padding:0;
        }
    </style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
    <div id="wrapper"> 
        <span class="x">
            <b>
                youtubeX
            </b>
        </span>
        </a> 
        <a href="http://www.lunagang.nl" target="_blank" title="lunagang">
            <span class="x">
                <b>
                    lunagang
                </b>
            </span>
        </a>
        <a href="http://www.facebook.com" target="_blank" title="facebook">
            <span class="x">
                <b>
                    facebook
                </b>
            </span>
        </a>
        <a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct                   admin">
            <span class="x">
                <b>
                    direct admin
                </b>
            </span>
        </a>

        <a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
            <span class="x">
                <b>
                    squirrelmail
                </b>
            </span>
        </a>

        <a href="http://www.runescape.com" target="_blank" title="runescape">
            <span class="x">
                <b>
                    runescape
                </b>
            </span>
        </a>

        <a href="http://www.google.com" target="_blank" title="google">
            <span class="x">
                <b>
                    google
                </b>
            </span>
        </a>

        <a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
            <span class="x">
                <b>
                    x3mis music
                </b>
            </span>
        </a>

        <a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
            <span class="x">
                <b>
                    game-vortex
                </b>
            </span>
        </a>

        <a href="http://www.outlook.com" target="_blank" title="outlook">
            <span class="x">
                <b>
                    outlook
                </b>
            </span>
        </a>
    </div>
</body>
<script type="text/javascript">
    function NNKeyCap(thisOne) {
     if (thisOne.modifiers & Event.SHIFT_MASK) {
         if (thisOne.which == 88) {
             var x = document.querySelectorAll(".x");
             x.forEach(function(element){
                element.classList.add("disableMenu");
             });                     
         }
     }
    }

    function IEKeyCap() {
     if (window.event.shiftKey) {
         if (window.event.keyCode == 88) {
             var x = document.querySelector("#wrapper");
             x.classList.add("disableMenu");
         }
     }
    }

    if (navigator.appName == 'Netscape') {
     window.captureEvents(Event.KEYPRESS);
     window.onKeyPress = NNKeyCap;
    }

    function myFunction() {
        var x = document.querySelector("#wrapper");
        x.classList.remove("disableMenu");
    }

    function myClickEvent(body)
    {
        var childDiv = body.querySelector('#wrapper');
        var hasClass = childDiv.classList.contains('disableMenu');
        if(hasClass)
        {
            document.location = 'http://www.google.com'; <!-- your background link here -->
        }
    }
</script>
</html>