Changeout Image based on Rollover and Checkbox

Hi Experts

I was wondering if someone could shed some light...We have a dynaically created list of products and when you roll over the list the "main image" changes out from the default image to the specific image for that option:

FUNCTION BEING USED:
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

MAIN IMAGE:
<img src='catalog/<%=pImageUrl%>' alt="" name="Image1" align="absmiddle">


ROW ROLLOEVER
<tr valign="middle" onMouseOver="MM_swapImage('Image1','','catalog/<%=rsSSCobj("imageUrl")%>',1);style.backgroundColor='#FFE6B3'" onMouseOut="MM_swapImgRestore();style.backgroundColor='#FFFFFF'">

Each row of products has a checkbox to select that item to be added to the cart. Is it possible to make the 'main image' the checkboxed image and still allow the rollovers to work?

Thanks
hnEEAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
Your request is NOT consistent.
But start with this and you will see the inconsistency:

<tr valign="middle" onMouseOver="MM_swapImage('Image1','','catalog/<%=rsSSCobj("imageUrl")%>',1);style.backgroundColor='#FFE6B3'" onMouseOut="MM_swapImgRestore();style.backgroundColor='#FFFFFF'">
<td>
<input type="checkbox" name="myProd_003" onClick="MM_swapImage('Image1','','catalog/'+((this.checked)?'<%=rsSSCobj("imageUrl")%>':'<%=pImageUrl%>'),1);">
</td>

mvan01Commented:
Hi hnEE,

One important function you did not include in your question was the routine which restores what you call the "main image".  From  onMouseOut="MM_swapImgRestore();, it can be found on the web:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

It puts back into x.src (the displayed image) its 'old' value, x.oSrc .  This 'old' value was created or saved in MM_swapImage() by this code:
if(!x.oSrc) x.oSrc=x.src;

Clearly, in order to change the "main image," you need to change the value of x.oSrc.  You have not shown us your checkbox line, but I'll assume that it is something like:
<input type="checkbox" name="myProd_003" onClick="doSomething(this)">

In addition to whatever you may already do in your onClick function you need to manage the value of x.oSrc .  Even if you do not currently have an onClick statement, you could just create one to manage x.oSrc :

function doSomething(obj) {
  var x;
  if (obj.checked) x.oSrc = x.src;
}

This says that if this object is checked, the old value of the image source (the "main image") should be that which is currently displayed.  If you already have an onClick function, just add those two lines (correctly adjusted to access your passed object).

Peace and joy. mvan
hnEEAuthor Commented:
Hi

Firstly, thanks for the help (BTW I did have the MM_swapImgRestore() function in place - just forgot to mention it)

I have tried both your suggestions - without success. Here is the output from MVAN suggestions:

UPDATED FUNCTIONS:
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function doSomething(obj) {
  var x;
  if (obj.checked) x.oSrc = x.src;
}
</script>

THE MAIN IMAGE:
<img src='catalog/a450mmgroupshot_1075_detail.jpg' alt="" name="Image1" align="absmiddle">

A SAMPLE ROW:
<tr valign="middle" onMouseOver="MM_swapImage('Image1','','catalog/blackblack_1204_detail.jpg',1);style.backgroundColor='#FFE6B3'" onMouseOut="MM_swapImgRestore();style.backgroundColor='#FFFFFF'">

THIS IS THE CHECKBOX:
<input type="checkbox" name="CAG229280" value="280_0_0_0" onClick="doSomething(this);javscript: calculate();" >

Any suggestions on where I might still be going wrong?

Thanks
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

hnEEAuthor Commented:
A bit of an update...

I have played around with both solutions and Zvonkos is working for me...however the onmouseout for the <tr> tag needs to look to see if the check box is checked and leave the image as the checked image and if it isn't go back to the default image...

if that happens i think we are all good on this one....

thanks
hnEEAuthor Commented:
Hi mvan01

I was just wondering if you are able to look at my post from "Date: 04/06/2006 08:34AM EST" and offer any suggestions on where I might be going wrong. I'm not to flash at Javascript and would appreciate it if you can 'dumb it down for me'

Thanks
mvan01Commented:
Hi hnEE,

I'll take a look ... Peace and joy.  mvan
mvan01Commented:
Hi hnEE,

Those MM_ functions are more complex code than I thought.  Maybe this?

YOUR NEW SAMPLE ROW:
<tr valign="middle" onMouseOver="MM_swapImage('Image1','','catalog/blackblack_1204_detail.jpg',1);style.backgroundColor='#FFE6B3'" onMouseOut="javascript:if (!document.CAG229280.checked) {MM_swapImgRestore()};style.backgroundColor='#FFFFFF'">

RESTORE TO YOUR ORIGINAL CHECKBOX (w/o doSomething()):
<input type="checkbox" name="CAG229280" value="280_0_0_0" onClick="calculate();" >

You may need to play around with (!document.CAG229280.checked) .  Instead, it might be better as: (document.CAG229280.checked != true)
... though these two should be about equivalent.

You see, the idea is to avoid calling MM_swapImgRestore if the status of the box is checked.  I think that's what you originally asked for.  I think it will leave, as the main image, the last 'checked' item rolled-over.  Any unchecked rows rolled over should call MM_swapImgRestore and switch back to the previous main image ... even if that was the one left by a checked box row.

Peace and joy.  mvan

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hnEEAuthor Commented:
Hi mvan01

I have been playing arpund with your suggestion. but can't get it to work. I have a lot of asp going on with the checkboxes etc so I might be doing it all wrong. I might make a simple html version and see if i can get it to work that way.

Will let you know. thanks for your help.
mvan01Commented:
OK.  I'm listening.  Peace and joy.  mvan
hnEEAuthor Commented:
Hi mvan01

I apologise for not resolving this question. I have been sidetracked with other projects. I just wanted you to know I haven't abandoned this question and will get back to it - soon.

Thanks for you patience.
mvan01Commented:
Hi hnEE,

No problem.

Peace and joy.  mvan
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.