如何使用JavaScript创建透明按钮？
[英]How can I create a transparent button with JavaScript?
问题描述
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}.) （顺便说一句，我是JavaScript的新手{约一周}。）
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 个解决方案
解决方案1
2 已采纳 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. 当然，您可以通过JavaScript创建此元素。
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 干杯
解决方案2
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? 您是否尝试过CSS不透明度并将级别设置为0？
解决方案3
0 2012-02-27 21:58:49
Why don't you use an empty div instead? 为什么不使用空div呢？ To make it clickable, just attach an onclick handler to the div. 要使其可单击，只需将一个onclick处理程序附加到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. 您还可以添加cursor:pointer CSS的cursor:pointer ，因此当鼠标位于div上时，您会看到“手”光标，就像在链接中一样。
解决方案4
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.