Question

我想创建一个透明按钮，这样用户仍然可以看到按钮下面的图像，但他们也可以点击按钮。

所以我尝试制作一个这样的按钮：

var howToPlayDiv = document.createElement('input');
howToPlayDiv.type = "button";
howToPlayDiv.style.height = '48px';
howToPlayDiv.style.width = '412px';
howToPlayDiv.style.background = "rgba(0,0,255,0.5)";
howToPlayDiv.style.position = "absolute";
howToPlayDiv.id = "howToPlayDiv";
howToPlayDiv.onmouseenter = "changeMenu('howToPlayDiv', 'mouseenter')";
howToPlayDiv.onmouseleave = "changeMenu('howToPlayDiv', 'mouseleave')";
howToPlayDiv.onclick = "changeMenu('howToPlayDiv', 'mouseclick')";
document.body.appendChild(howToPlayDiv);

但这不起作用。我也尝试了上述代码的许多变体 - 但无济于事。有时候，我只能点击按钮的两侧（那些不透明）。有时，我甚至不能这样做。

如何创建透明，可点击的按钮？

（顺便说一下，我是JavaScript的新手{约一周}。）

编辑：啊哈！我发现现在的问题在于事件处理程序没有触发 - 基本上，这与按钮的不透明度无关。现在：如何为按钮创建事件处理程序？

Answer 1

我添加了这些，对我有用：

howToPlayDiv.style.background = "none";
howToPlayDiv.style.border = "none";

但是将它设为按钮（因为它就是这样），按钮的好处是你可以将背景图像设置为你想要的任何颜色。

<button type="button" style="background:url('/url/to/image') no-repeat left top; height:48px; width:412px;"></button>

......例如。当然，您可以通过JavaScript创建此元素。

修改：

我不清楚你的问题是什么不适合你，抱歉。请尝试分配您的回调：

howToPlayDiv.onmouseenter = function(){changeMenu('howToPlayDiv', 'mouseenter')}; howToPlayDiv.onmouseleave = function(){changeMenu('howToPlayDiv', 'mouseleave')}; howToPlayDiv.onclick = function(){changeMenu('howToPlayDiv', 'mouseclick')};

干杯

Answer 2

您基本上正在重新创建image map。

您是否尝试CSS opacity并将级别设置为0？

Answer 3

为什么不使用空div？要使其可单击，只需将一个onclick处理程序附加到div。您还可以将cursor:pointer添加到CSS中，因此当鼠标悬停在div上时，您会看到“手”光标，就像在链接中一样。

Answer 4

我使用了这个自动缩放按钮，可以使用透明背景图像。背景图像应足够宽，以保持按钮的最大宽度。

<html>
<head>
    <style>
        /* Create a copy of all the .my-btn rules for each type of button and adjust the values */

        .my-btn, 
        .my-btn span {
          background-image: url(img/transparentButton.png); 
          height: 50px;                /* Set this to the height of the image */
        }
        .my-btn {
          line-height: 50px;        /* Adjust this so the text is vertically aligned in the middle of the button */
          padding-left: 20px;        /* Can be any value. It's the distance of the button text from left side */
          margin-right: 30px;        /* Make this as wide as the width of the span */
          color: white;                /* The color of the button text */
          text-decoration: none;
        }
        a.my-btn:hover {
          color: black;                /* The color of the button text when hovering */
          font-weight: bold;        /* This example has a bold text when hovering. Can be anything, really */
        }
        .my-btn span {
          margin-right: -30px;         /* Make this as wide as the witdh of the span */    
          width: 30px;                /* The width of the right edge of the button */
        }

        /* These .btn classes are generic for all button styles and should not be changed */

        .btn, 
        .btn span {
          display: block;
          background-position: left top;
          background-repeat: no-repeat;  
        }
        .btn {
          white-space: nowrap;
          float: left;
          position: relative;
          text-align: center;
        }
        .btn span {
          position: absolute;
          background-position: right top;  
          top: 0;
          right: 0;
          *right: auto;                /* IE 6 and 7 hack - right does not work correctly in IE6 and7 */
          float: right;                /* IE 6 and 7 hack - alternative for right, works only in IE6 and IE7 */           
        }
        a.btn span {
          cursor: hand;                /* IE hack - To make the mouse pointer change in IE on hover as well */
        }            


        #demo-box {
            padding: 40px;
            height: 300px;
            background: transparent url(css/img/pageBackground.png) top left repeat;
        }

    </style>
</head>
<body>
    This demo shows examples of a semi transparent button on a background.
    <div id="demo-box">
        <a href="\" class="btn my-btn">Shrt text in link<span></span></a>
        <a  href="\" class="btn my-btn">Loooooooooooong text in a link element<span></span></a><br><br><br>
        <div class="btn my-btn">text in a div<span></span></div>
    </div>
</body>
</html>

如何使用JavaScript创建透明按钮？

4 个答案: