Как я могу создать прозрачную кнопку с помощью JavaScript? - PullRequest
Новая
       41

Как я могу создать прозрачную кнопку с помощью JavaScript?

0 голосов
/ 28 февраля 2012

Я хочу создать прозрачную кнопку, чтобы пользователь все еще мог видеть изображение под кнопкой, но он также может нажимать на кнопку.

Итак, я попытался создать такую ​​кнопку: 

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 {около недели}.)

РЕДАКТИРОВАТЬ: Ага!Я обнаружил, что проблема сейчас заключается в том, что обработчики событий не запускаются - по сути, это не имеет ничего общего с непрозрачностью кнопки.Итак, теперь: Как я могу создать обработчик событий для кнопки?

Ответы [ 4 ]

2 голосов
/ 28 февраля 2012

Я добавил это, у меня работает: 

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, как вы делаете.

EDIT

Из твоего вопроса мне было не ясно, что у тебя не работает, извини. Попробуйте назначить ваши обратные вызовы таким образом: 

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

Приветствия

0 голосов
/ 28 февраля 2012

Я использовал эту кнопку автоматического масштабирования, которая будет работать с прозрачным фоновым изображением. Фоновое изображение должно быть достаточно широким, чтобы вместить максимальную ширину кнопки. 

<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>
0 голосов
/ 28 февраля 2012

Почему бы вам не использовать вместо этого пустой div?Чтобы сделать его кликабельным, просто прикрепите обработчик onclick к div.Вы также можете добавить cursor:pointer в свой CSS, поэтому, когда мышь находится над div, вы увидите курсор «руки», как в ссылках.

0 голосов
/ 28 февраля 2012

Вы в основном воссоздаете карту изображений .

Вы пробовали Непрозрачность CSS и установили уровень на 0?

...