Как реализовать настроенный <input type = "reset" />? - PullRequest
Новая
       9

Как реализовать настроенный <input type = "reset" />?

1 голос
/ 22 октября 2009

При включении он должен выглядеть так: 

<input type="image" src="1.jpg" />

Когда onmouseout, он должен выглядеть как 

<input type="image" src="2.jpg" />

Ответы [ 5 ]

1 голос
/ 22 октября 2009

Я бы оставил <input type=reset> и, используя Javascript, скрыл его, создал бы элемент <a> и стилизовал бы его так, как мне нравится, прикрепил обработчик события на click к якору, чтобы вызвать сброс, и использовал CSS :hover на якоре, поэтому фоновое изображение меняется. Пользователи без Javascript увидят обычную кнопку сброса ole.

0 голосов
/ 15 декабря 2009

<input type="image"> просто предназначен для представления некоторой карты , в которой конечный пользователь сможет указать конкретные местоположения в.

Но ты не хочешь этого делать. Вам просто нужна кнопка с фоновым изображением. Поэтому я бы предложил заменить его на <input type="reset"> на CSS background-image, который установлен на url(path/to/your/image.png). Затем вы можете добавить Javascript ( jQuery , может быть, есть функция hover ), которая меняет класс CSS при наведении курсора и наведении мыши. Например: 

$("#buttonid").hover(
    function () {
        $(this).addClass('hover');
    }, 
    function () {
        $(this).removeClass('hover');
    }
);

с CSS 

#buttonid {
    background: url(path/to/your/image.png);
}
#buttonid.hover {
    background-position: 20px; /* Make use of CSS sprites. */
}

(подробнее о CSS-спрайтах здесь )

Некоторые предлагают использовать для этого псевдокласс CSS :hover, но это работает не во всех браузерах с элементами, отличными от <a>.

0 голосов
/ 15 декабря 2009

Не беспокойтесь об изменении представления самой кнопки сброса, сделайте ее невидимой. Сделайте свою собственную кнопку сброса, представленную ссылкой с хешем для href, и сделайте так, чтобы она вызывала кнопку rest при нажатии: 

<a href="#" class="resetPush">
  <span>Reset</span>
</a>

В сочетании со следующим JavaScript: 

$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
  e.preventDefault();
  $("input[type='reset']").trigger("click");
});

А что касается эффекта переворачивания ссылки, css может справиться с этим для вас: 

a.resetPush span { display:none; }
a.resetPush      { display:block; width:100px; height:25px;
                   background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }
0 голосов
/ 22 октября 2009

Я не знаю точно, что вы пытаетесь сделать, но, как и Тордек, я бы предложил использовать CSS и: hover

Вот CSS: 

.myButton{
  background:url("2.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}
.myButton:hover {
  background:url("1.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}

А вот и HTML: 

<input type="submit" class="myButton" value="">
0 голосов
/ 22 октября 2009

Добавьте в свой CSS правильные правила для :hover; Он должен работать на всем, кроме IE, который не поддерживает hover ни в одном элементе.

...