View Full Version : Javascript alert on a rollover image

10-12-2006, 07:01 AM
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

10-12-2006, 08:40 AM
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>

10-12-2006, 02:42 PM
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?