• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 219
  • Last Modified:

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
0
hnEE
Asked:
hnEE
  • 5
  • 5
1 Solution
 
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>

0
 
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
0
 
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
0
 
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
0
 
mvan01Commented:
Hi hnEE,

I'll take a look ... Peace and joy.  mvan
0
 
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
0
 
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.
0
 
mvan01Commented:
OK.  I'm listening.  Peace and joy.  mvan
0
 
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.
0
 
mvan01Commented:
Hi hnEE,

No problem.

Peace and joy.  mvan
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now