Измените образ кнопки команды JSF с помощью события DHTML onmouseover

Question

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

Я поехал на событие DHTML при помощи mmoverover, могу ли я это сделать, но как?

Нужно ли мнесоздать javascript и для него?

Что я должен сделать, чтобы он работал?

Это мой текущий код:

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="/resources/images/mainbtn2.png"/">

Answer 1

<h:commandButton image="foo.png"> генерирует HTML <input type="image" src="foo.png">. Атрибут onmouseover (как и все атрибуты on*) должен указывать на функции JavaScript. Тем не менее, вы помещаете туда путь к изображению. Это приведет только к ошибке JavaScript (которую вы заметили бы, если бы использовали Firebug или WDT).

Вам нужно написать JS, который соответственно изменит атрибут src кнопки изображения:

onmouseover="this.src='/resources/images/mainbtn2.png'"

Не забудьте добавить onmouseout, который вернет изображение обратно.

---

Не связанный с конкретной проблемой, обычная практика - использовать для этого фоновые изображения CSS. HTML <input type="image"> технически имеет совершенно другое назначение. Он представляет собой карту изображения, которая позволяет отправлять координаты мыши в том месте, где вы щелкнули мышью, на карте изображения. Вы, очевидно, не заинтересованы в этой информации, поскольку не используете статическое изображение.

1020 * Е.Г. *

<h:commandButton value="" styleClass="mybutton" />

, который генерирует

<input type="submit" value="" class="mybutton" />

и добавьте этот CSS (пример загрузки)

.mybutton {
    margin: 2px;
    padding: 0;
    border: 0;
    width: 100px;
    height: 20px;
    background-image: url('foo.png');
    cursor: pointer;
    overflow: visible;
}

.mybutton:hover {
    background-image: url('bar.png');
}

Это не только лучше повторно использовать / поддерживать, но и не требует поддержки JS.

Answer 2

Да, все onXXX атрибуты предназначены для обработчиков событий JavaScript.Для этого вам нужно написать функцию JavaScript.Примерно так:

function changeImage() {
    this.style.backgroundImage = "url('path/to/image.png')";
}

И вызывается с помощью:

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="changeImage()" />

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