How do I make an AJAX rollover button for my current contact form?

iasiis · March 15, 2009

Greetings,

I would like to make an AJAX orJava rollover "Send" button for an AJAX contact form I have created. The button styling exists in the CSS style sheet as:

.button 
{
border: 0px #567397 solid;
width:55px;
height:27px;
display:block;
background:url(/stomatologdeblin/wyslij.jpg) 0 0 no-repeat;
background-color: transparent;
position: absolute;
top: 321px;
left: 352px;
}

But I am trying to figure out how to make it so when someone rolls over the button, the image changes to a second picture, or in this case the image will just move over to the left by 55 pixels since I have created one .jpg with both images. Here is the picture of the (Polish language) send button:

I assume the code will have to go somewhere in the Java section with in the <head> of the contact page but that is as far as I have gotten as I am new to AJAX/Java. Here is the code for the contact (kontakt) page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">
   // we will add our javascript code here           

$(document).ready(function(){
$("form").submit(function(){

// 'this' refers to the current submitted form
var str = $(this).serialize();

   $.ajax({
   type: "POST",
   url: "contact.php",
   data: str,
   success: function(msg){

$("#note").ajaxComplete(function(event, request, settings){

if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Wiadomosc wyslana. Dziekuje! </div>';
$("#fields").hide();
}
else
{
result = msg;
}

$(this).html(result);

});

}

});

return false;

});

});

</script>  

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

    <div class="wrapper">           
    
        <div class="header">
        
            <div class="godziny">
                <a href="/stomatologdeblin/godziny.htm">Godziny</a>
            </div>
                    
            <div class="oferta">
                <a href="/stomatologdeblin/oferta.htm">Oferta</a>
            </div>
            
            <div class="kontakt">
                <a href="/stomatologdeblin/kontakt.htm">Kontakt</a>
            </div>
            
            <div class="mapa">
                <a href="http://www.zumi.pl/namapie.html?qt=&loc=deblin%2C+ul.+Stezycka+11&Submit=Szukaj&cId=&sId=" target="_blank">Mapa</a>
            </div>
        
        </div>
        
     <div class="body-kontakt">

<fieldset class="info_fieldset">

<div id="note"></div>
<div id="fields">

<form action="javascript:alert('success!');">

<input onfocus="this.select()" class="name" type="text" name="name" value="Imie"><br />
<input  onfocus="this.select()" class="email" type="text" name="email" value="Email"><br />
<input  onfocus="this.select()" class="subject" type="text" name="subject" value="Temat"><br />
<textarea class="message" type="text" name="message" value="Message" ROWS="5" COLS="25"></TEXTAREA><br />
<input class="button" type="submit" name="submit" value="">

</form>

</fieldset>


        </div>
        
        <div class="footer">
        
        
           <p>
<b><i>PRYWATNY GABINET STOMATOLOGICZNY</i></b><br>
               lek. stom. Aleksandra Szablinska <br>
               ul. Stezycka 11, 08-530 Deblin<br>
               tel. 0 692 171 953  <br>      
             </p>
        
<div class="footer-kontakt">
                <a href="/stomatologdeblin/kontakt.htm">Kontakt</a>
            </div>

              <div class="footer-mapa">
                <a href="http://www.zumi.pl/namapie.html?qt=&loc=deblin%2C+ul.+Stezycka+11&Submit=Szukaj&cId=&sId=" target="_blank">Mapa</a>
            </div>
        
      	
    </div>


</body>

</html>

And here is the link to full page online:

http://caeious.com/stomatologdeblin/kontakt.htm

Thanks,

IASIIS

Floydian · March 17, 2009

I see you're using jQuery, and since I'm not a jQuery guy, I can't give you the exact code to use here, but I can tell you a method that will do what you want.

You will want to attach two event listeners to your button. You need a mouseover and a mouseout event listener.

Then, in the event handler functions, you would set the style of button's "background-position:" to the pixel position you want. It follows an x/y deal. Since you would be setting the bg position dynamically, you would use something like


element.style.backgroundPosition =  '10px, 0';

or something like that.

If you aren't sure how to attach event listeners with jQuery, I'm sure you can find some sample code on their site for that.

Sign In

How do I make an AJAX rollover button for my current contact form?

Recommended Posts

iasiis

Link to comment

Share on other sites

Floydian

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information