iasiis Posted March 15, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/149518-how-do-i-make-an-ajax-rollover-button-for-my-current-contact-form/ Share on other sites More sharing options...
Floydian Posted March 17, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/149518-how-do-i-make-an-ajax-rollover-button-for-my-current-contact-form/#findComment-786455 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.