Web Analytics Made Easy -
StatCounter Javascript alert on a rollover image - CodingForum


No announcement yet.

Javascript alert on a rollover image

  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript alert on a rollover image

    This is the problem i am having. I am trying to get javascript to popup an alert on a rollover image. Go here to see what i have for a rollover image. it's on the add to cart button. I want to have the button be the trigger for the alert, so the people will know to fill out the submit form before they can add the item to their cart.

    This is the code I have for the script to get my image to do the rollover

    function FP_swapImg() {//v1.0
     var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
     n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
     elm.$src=elm.src; elm.src=args[n+1]; } }
    function FP_preloadImgs() {//v1.0
     var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
     for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
    function FP_getObjectByID(id,o) {//v1.0
     var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
     else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
     if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
     for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
     f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
     for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
     return null;
    function FP_swapImgRestore() {//v1.0
     var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
      var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
      doc.$imgSwaps=null; }
    This is in the body of the page

    <Body OnLoad="FP_preloadImgs(/*url*/'images/images/add_to_cart_locked_01-over.gif'); javascript:Personalize.Customers_Name.focus()">
    And finally the part that I am sure is very wrong, but i couldn't figure out how to do it.

    <img border="0" src="images/images/add_to_cart_locked_01.gif" width="100" height="20" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/images/add_to_cart_locked_01-over.gif')"><A HREF="JavaScript: alert('Submit required information first, thank you.');"></a>
    Maybe this will help more. This is the site i am editing. http://www.alwaysinmyheartinc.com/SUB66WF2.htm
    Last edited by SipherDrakon; Oct 12, 2006, 02:12 AM. Reason: added the site in question

  • #2
    It should be
    <A HREF="#" onclick="return false"><img border="0" src="images/images/add_to_cart_locked_01.gif" width="100" height="20" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="alert('Submit required information first, thank you.');FP_swapImg(1,1,/*id*/'img1',/*url*/'images/images/add_to_cart_locked_01-over.gif')"></a>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


    • #3
      Hmmm, that wasnt quite what i was thinking. That only gives an alert when someone mousesover the image. I want it to display the rollover image, and then if you click on the displayed rollover image, then it should give the alert. How might i do that?