如何使用JavaScript創建透明按鈕？

我想創建一個透明的按鈕，以便用戶仍然可以看到按鈕下方的圖像，但他們可以點擊按鈕也是如此。如何使用JavaScript創建透明按鈕？

所以我試圖使一個按鈕像這樣：

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新手{一週左右}。）

編輯：啊哈！我發現，現在的問題在於一個事實，即事件處理程序不開火 - 基本上，這有什麼好做的按鈕的不透明度。所以現在：我如何創建按鈕的事件處理程序？

來源

2012-02-27 JavaAndCSharp

小提琴：http://jsfiddle.net/Kxn26/ – 2012-02-27 21:53:47

..它看起來是透明的我。我們可能需要看到，其產生應該下方顯示圖像或其他內容的代碼。如果它在DOM之上，可以解釋爲什麼按鈕不可點擊或者你沒有看到你期望的。 – 2012-02-27 21:54:59

哇......那太瘋狂了。在30分鐘內，有3個答案，1個更新的答案，7個評論，對問題的編輯以及解決的答案。我只需要愛StackOverflow。當然，感謝Madbreaks的編輯解決了這個問題。 – JavaAndCSharp 2012-02-27 22:23:06

我說這些，對我的作品：

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

乾杯

來源

2012-02-27 21:58:07 Madbreaks

沒有事件被解僱。它是如何爲你工作而不是爲我工作的？ – JavaAndCSharp 2012-02-27 22:03:31

@JavaAndCSharp - 我誤解了你的意思，但這不起作用 - 回答更新 – Madbreaks 2012-02-27 22:16:31

Woo！有用！我前段時間嘗試過類似的方法，但我可能沒有注意到它的工作原理。哎呀。不管怎樣，謝謝。 – JavaAndCSharp 2012-02-27 22:18:38

你基本上是重新創建一個image map。

你嘗試CSS opacity和級別設置爲0？

來源

2012-02-27 21:54:29 epascarello

你爲什麼不使用空div呢？爲了使它可點擊，只需將一個onclick處理程序附加到div。您還可以添加cursor:pointer你的CSS，所以當鼠標在DIV，你會看到「手」光標，就像鏈接。

來源

2012-02-27 21:58:49 bfavaretto

爲什麼使用div模仿按鈕，當你有'

@Madbreaks，因爲*透明*按鈕不是一個典型的按鈕。 – bfavaretto 2012-02-27 22:04:23

當然可以。它的透明度只是一個造型細節。從行爲的角度來看，透明與黑色，白色，紅色等沒有區別。 – Madbreaks 2012-02-27 22:27:58

我已經使用這個自動縮放按鈕，將與透明背景圖像一起使用。背景圖像應足夠寬以保持按鈕的最大寬度。

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

來源

2012-02-27 22:23:28 koenpeters

如何使用JavaScript創建透明按鈕？

回答

相關問題