How can I create a transparent button with JavaScript? - Stack Overflow

admin管理员组

文章数量:1394593

I want to create a transparent button so that the user can still see the image underneath the button but they can click on the button as well.

So I tried making a button like this:

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);

But this doesn't work. I tried many variations of the above code as well - but to no avail. Sometimes, I could click only on the sides of the button (those were not transparent). Sometimes, I could not even do that.

How can I create a transparent, clickable button?

(BTW, I'm extremely new to JavaScript {about a week}.)

EDIT: Aha! I found out that the problem now lies with the fact that the event handlers are not firing - basically, this has nothing to do with the button's opacity. So now: How can I create an event handler for the button?

I want to create a transparent button so that the user can still see the image underneath the button but they can click on the button as well.

So I tried making a button like this:

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);

But this doesn't work. I tried many variations of the above code as well - but to no avail. Sometimes, I could click only on the sides of the button (those were not transparent). Sometimes, I could not even do that.

How can I create a transparent, clickable button?

(BTW, I'm extremely new to JavaScript {about a week}.)

EDIT: Aha! I found out that the problem now lies with the fact that the event handlers are not firing - basically, this has nothing to do with the button's opacity. So now: How can I create an event handler for the button?

• javascript
• button
• transparency
• transparent

Share Improve this question Follow edited Feb 27, 2012 at 22:09 JavaAndCSharp asked Feb 27, 2012 at 21:49 JavaAndCSharpJavaAndCSharp 1,56733 gold badges2323 silver badges4747 bronze badges 3

• Fiddle : jsfiddle/Kxn26 – Jim Blackler Commented Feb 27, 2012 at 21:53
• .. it looks transparent to me.. we might need to see the code that generates the image or other content that is supposed to show underneath. If it is above it in the DOM that could explain why the button isn't clickable or you're not seeing what you expect. – Jim Blackler Commented Feb 27, 2012 at 21:54
• 1 Wow... that was crazy. In 30 minutes, there were 3 answers, 1 updated answer, 7 ments, an edit to the question, and a solved answer. I just have to love StackOverflow. And of course thanks to Madbreaks for his edit that solved the question. – JavaAndCSharp Commented Feb 27, 2012 at 22:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

I added these, works for me:

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

But make it a button (since that's what it is), the benefit of a button is that you can set the background image to whatever you want.

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

...for example. Of course you can create this element via JavaScript as your are doing.

EDIT:

It wasn't clear to me from your question what wasn't working for you, sorry. Try assigning your callbacks thusly:

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

Cheers

You are basically recreating an image map.

Did you try CSS opacity and set the level to be 0?

Why don't you use an empty div instead? To make it clickable, just attach an onclick handler to the div. You can also add cursor:pointer to your CSS, so when the mouse is over the div, you'd see the "hand" cursor, like in links.

I have used this auto scale button that will work with a transparent background image. The background image should be wide enough to hold the maximum width of the button.

<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>

本文标签： How can I create a transparent button with JavaScriptStack Overflow