Image flip on continuous form

kedrew · Oct 27, 2001

I am working on a shopping cart that will have a button next to each product allowing them to add the item into their car. I am trying to have a rollover effect to depress the button. (Yes, I will admit that its a loaded question).

I know how to process the submit action for the proper form, but I'm having a heck of a time trying to swap the images on the rollover. I can make it work when I only have one item on the page - but when I have more than one, that's when my problems begin.

JavaScript in '<HEAD>' of document

Code:

AddToCartDwn = new Image(150,75)
AddToCartDwn.src = &quot;/images/addtocart-down.gif&quot;
AddToCartUp = new Image(150,75)
AddToCartUp.src = &quot;/images/addtocart.gif&quot;

function FormSubmit(form_id, button_id) {
	document.forms[form_id].btnAction.value = button_id;
	document.forms[form_id].submit();
}

function btnDown(reference, id) {
//	document.reference[id].src = eval(reference + &quot;Dwn.src&quot;); return true;
	document.images[0].src = eval(reference + &quot;Dwn.src&quot;); return true;
}
function btnUp(reference, id) {
//	document.reference[id].src = eval(reference + &quot;Up.src&quot;); return true;
	document.images[0].src = eval(reference + &quot;Dwn.src&quot;); return true;
}

Sample for within loop (for multiple items)
'$i' is the loop variable

Code:

<form action=&quot;<?PHP echo(getenv(REQUEST_URI)) ?>&quot; method=&quot;post&quot; name=&quot;$i&quot;>
			<IMG SRC=&quot;/images/addtocart.gif&quot; HEIGHT=&quot;75&quot; WIDTH=&quot;150&quot; BORDER=0 ALT=&quot;Add to Cart&quot; onMouseOver=&quot;btnDown('AddToCart', '$i')&quot; onMouseOut=&quot;btnUp('AddToCart', '$i')&quot; onClick=&quot;FormSubmit('<?PHP echo($i) ?>', 'Add To Cart')&quot; name=&quot;$i&quot;> 
			<IMG SRC=&quot;/images/checkout.gif&quot; HEIGHT=&quot;75&quot; WIDTH=&quot;150&quot; BORDER=0 ALT=&quot;Checkout&quot; onMouseOver=&quot;btnDown('Checkout', '$i')&quot; onMouseOut=&quot;btnUp('Checkout', '$i')&quot; onClick=&quot;FormSubmit('$i','Checkout')&quot;  name=&quot;$i&quot;> 

</FORM>

Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image flip on continuous form

kedrew

Programmer

Similar threads

Part and Inventory Search

Sponsor