Solved

Modify Hover Button to Lock After CLICK?

Posted on 2004-10-19
3
1,222 Views
Last Modified: 2012-08-14
Can u help? With some great help from EE experts I have this wonderful (and working) script below that displays a hover button with three states:

- hover on - img : "button_on_reg_subscribe.jpg"
- hover off - img : "button_off_reg_subscribe.jpg"
- clicked - img : "button_click_reg_subscribe.jpg"

Again - this works well - but I need to modify!.  The button is used for submitting credit card payments to some code that processes the payment and either authorizes or rejects etc.  BUT on testing this form I realize I need to ensure the user does not CLICK the button more than ONCE!

SO ... can someone please help me with this modification:

WHEN THE USER CLICKS the above button ... LOCK the button (so it cannot be clicked again) and LOCK the image (leave the image) as "button_click_reg_subscribe.jpg" - EVEN when the user's mouse is no longer ON the image?

Does this make sense?

THIS IS THE CURRENT CODE:


<script>
function VMaxOver2(link,id,overIm) {
if(document.images) {
 im            = document.images[id];
 im.outIm      = new Image();
 im.overIm     = new Image();
 im.outIm.src  = document.images[id].src;
 im.overIm.src = overIm;
 im.src        = im.overIm.src;
 link.onmouseout  = new Function("var im=document."+id+"; im.src=im.outIm.src;");
 link.onmouseover = new Function("var im=document."+id+"; im.src=im.overIm.src;");
 }
}
</script>


<a onClick="VMaxOver2(this,'button_reg_subscribe','./newopex_graphics/button_click_reg_subscribe.gif');document.forms['process_payment'].submit();" onMouseOver="VMaxOver2(this,'button_reg_subscribe','./newopex_graphics/button_on_reg_subscribe.jpg')"><IMG NAME="button_reg_subscribe" SRC="./newopex_graphics/button_off_reg_subscribe.jpg" border=0 width="105" height="34"></a>



Thanks for your help!
Richard
0
Comment
Question by:rcbuchanan
3 Comments
 
LVL 5

Accepted Solution

by:
darksinclair earned 500 total points
ID: 12347663
<a onClick="this.disabled='true';VMaxOver2(this,'button_reg_subscribe','./newopex_graphics/button_click_reg_subscribe.gif');document.forms['process_payment'].submit();" onMouseOver="VMaxOver2(this,'button_reg_subscribe','./newopex_graphics/button_on_reg_subscribe.jpg')"><IMG NAME="button_reg_subscribe" SRC="./newopex_graphics/button_off_reg_subscribe.jpg" border=0 width="105" height="34"></a>


Try the above .. it will disable the button when you click on it and then go through your VMaxOVer2 function.

Cheers,
0
 
LVL 18

Expert Comment

by:arantius
ID: 12347836
Online example: http://www.arantius.com/ee/Q_21173866.html
Remove the alert("Submit") and uncomment the line before, make it actually submit your form.

<html>
<head>
<script type="text/javascript">
var clicked=false;
function setImage(img, state) {
      if (clicked) return;
      switch (state) {
            case "on": img.src="cloud2.png"; break;
            case "off": img.src="cloud1.png"; break;
            case "click": img.src="cloud3.png"; break;
            case "dis":
                  img.src="cloud-dis.png";
                  clicked=true;
                  //document.forms.xxxx.submit();
                  alert("submit");
                  break;
      }      
}
</script>
</head>
<body>

<img src="cloud1.png"
      border="0"
      onmouseover="javascript:setImage(this, 'on');"
      onmouseout="javascript:setImage(this, 'off');"
      onmousedown="javascript:setImage(this, 'click');"
      onmouseup="javascript:setImage(this, 'dis');"
>

</body>
</html>
0
 

Author Comment

by:rcbuchanan
ID: 12351916
thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question