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

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

您基本上是在重新创建图像映射。

您是否尝试过CSS不透明度并将级别设置为0？

Answer 3

为什么不使用空div呢？ 要使其可单击，只需将一个onclick处理程序附加到div。 您还可以添加cursor:pointer CSS的cursor:pointer ，因此当鼠标位于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 个解决方案

解决方案1
2 已采纳 2012-02-27 21:58:07

解决方案2
0 2012-02-27 21:54:29

解决方案3
0 2012-02-27 21:58:49

解决方案4
0 2012-02-27 22:23:28

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2012-02-27 21:58:07

解决方案2 0 2012-02-27 21:54:29

解决方案3 0 2012-02-27 21:58:49

解决方案4 0 2012-02-27 22:23:28

解决方案1
2 已采纳 2012-02-27 21:58:07

解决方案2
0 2012-02-27 21:54:29

解决方案3
0 2012-02-27 21:58:49

解决方案4
0 2012-02-27 22:23:28