How can I create a transparent button with JavaScript?
Question
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?
4 answers
solution1
2 ACCPTED 2012-02-27 21:58:07
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
solution2
0 2012-02-27 21:54:29
You are basically recreating an image map .
Did you try CSS opacity and set the level to be 0?
solution3
0 2012-02-27 21:58:49
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.
solution4
0 2012-02-27 22:23:28
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.