Форум Сайтостроение Веб-строительство

Загрузчик на js, и вывод кнопки input, проблема

L
На сайте с 18.02.2012
Offline
83
l17l
653

Здравствуйте, есть проблема с кнопкой.

При наведении на кнопку, как то она не так работает, дергается, нормально не меняется.

При клике кнопка работает так что открывается окно и там выбираем какое фото загрузить.

Смена стиля идет при наведении, но как то не корректно.

Кнопка:


<input type="button" id="upload" title="Загрузить основную фотографиюу" name="submit" value="Выбрать и загрузить основную фотографию" class="poiskknop" style="cursor: pointer">

Стиль css:


input.poiskknop {
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
border: 1px solid #F16499;
padding-right: 12px;
padding-left: 12px;
padding-top: 6px;
padding-bottom: 6px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-html-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(240,97,151); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,97,151,1) 0%, rgba(225,58,121,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,97,151,1)), color-stop(100%,rgba(225,58,121,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f06197', endColorstr='#e13a79',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-moz-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-o-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-html-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
color:#fff;
}
input.poiskknop:hover{
border: 1px solid #F16499;
background: rgb(255, 220, 239);
background: -moz-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(0deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
color: #88003E;
}

Как только я стили не менял, что то не вышло сделать нормально.

Сам скрипт загрузки по ид, id="upload" , если убираем то кнопка работает нормально, наводим и все ок, не мерцает когда ведем мышкой по кнопке.

Залез в js:


/**
* Creates invisible file input above the button
*/
_createInput : function(){
var self = this;
var input = d.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('name', this._settings.name);
var styles = {
'position' : 'absolute'
,'width': '400px'
,'height': '100px'
,'fontSize': '14px'
,'opacity': 0
,'cursor': 'pointer'
,'display' : 'none'
,'zIndex' : 2147483583 //Max zIndex supported by Opera 9.0-9.2x
// Strange, I expected 2147483647
};

Если убираю 'position' : 'absolute', все работает хорошо, но сам загрузчик не работает, не выскакивает окно.

Помогите решить проблему...

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

Я загрузил видео, что бы было понятно что за мерцания:

http://video.yandex.ru/users/lcucl/view/1/

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий