Jak zrobić zmieniający się przycisk?

Jak zrobić przycisk np. pod formularzem który będzie się zmieniał po najechaniu na niego myszką?

W tym przykładzie zastosowałem plik graficzny zamiast standardowego przycisku daje to większe możliwości.

Przycisk umieszczamy korzystając z html’a:

<input id="sa" src="button-off.png" type="image" />

a całym zmienianiem zajmie się jQuery:

<script src="jquery_lib.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 	$("#sa").mouseover(function(){
 	    $("#sa").attr('src', 'button-on.png');
 	});
 	$("#sa").mouseout(function(){
 	    $("#sa").attr('src', 'button-off.png');
 	});
});
</script>

1 thought on “Jak zrobić zmieniający się przycisk?

  1. Ponownie za dużo kodu w JS i zmieniania klas, zacznij wykorzystywać CSS’y. W aktualnych standardach idzie zrobić z nimi cuda, a jeżeli nie umiesz generować przycisków w css to polecam stronę: http://www.cssbuttongenerator.com/

    Dodatkowo polecam każdemu zapoznanie się z :hover :active w css.
    Szybsze i bardziej elastyczne.

Comments are closed.