PDA

View Full Version : Changing an image source with a radio button



noleeo
11-11-2008, 12:26 PM
I have this script I'm trying to modify, but need some help. It's a radio button with attached image that changes another image in a shopping cart.
Here is an example at http://curvexs.com/shopexd.asp?id=15

This script already changes the filename for color option and logo option, but I need a product option as well. I would like to add another parameter in here to allow another change in the file name. I have added the 'visor-beanie' in the below code, but cannot manipulate the javascript below to allow this change in the filename.



<input class=radio type="radio" value="Black" id='rdBlackColor'/>
<label for='rdBlackColor'><a href="#" onClick="toggleButton('Black', 'Color', 'Visor-Beanie', 'BlackColor');"><img border='0' id='BlackColor' align='absmiddle' src='images/full/SG-Visor-Beanie-Black' onClick=""doRadioSelect(this)""></a></label>


Here is the javascript



var counter=0;
var pressed = { "Nocolor" : true, "SGlogo" : true, "Blackcolor" : false, "Blacklogo" : false, "Bluecolor" : false, "Bluelogo" : false,
"Redcolor" : false, "Redlogo" : false, "Yellowcolor" : false, "Yellowlogo" : false,
"Pinkcolor" : false, "Pinklogo" : false, "Browncolor" : false, "Brownlogo" : false,
"Pink-Blackcolor" : false, "Blue-Pinkcolor" : false,
"Whitecolor" : false, "Whitelogo" : false, "Silvercolor" : false, "Silverlogo" : false};
var previousColor = '';
var previouslogo = '';


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_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

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 replaceOptionsImage() {
LogoSelect = '';
ColorSelect = '';
for (imageName in pressed) { // for each button image
if(pressed[imageName]) { // if it's pressed
if(imageName.indexOf("color") != -1) { // Save it's color
ColorSelect = imageName.substring(0, (imageName.length - 5));
}
else if(imageName.indexOf("logo") != -1) {
LogoSelect = imageName.substring(0, (imageName.length - 4));
}
}
}


if(LogoSelect != previouslogo || ColorSelect != previousColor) {
assemblyImageFile = document.getElementById("optionsImageAssembly");
enlargeAssemblyImageFile = document.getElementById("enlargeOptionsImageAssembly");
assemblyImageFile.src="images/full/"+LogoSelect+"-Visor-Beanie-"+ColorSelect+".jpg";
enlargeAssemblyImageFile.href="images/full/"+LogoSelect+"-Visor-Beanie-"+ColorSelect+".jpg";
}

previousColor = ColorSelect;
previouslogo = LogoSelect;

}

function toggleButton(color, type, imageName2, imageName) {

if(pressed[imageName]) {
//MM_swapImage(imageName,'','images/color-buttons/'+color+'.gif',1);
}
else {
deselectButtons(type, color);
MM_swapImage(imageName,'','images/color-buttons/'+color+'-PRESS.gif',1);
pressed[imageName] = !pressed[imageName];
replaceOptionsImage();
}
return false;
}

// Parse all image names and if it is pressed, we need to disable it.
function deselectButtons(type, color) {
for (imageName in pressed) {
if(pressed[imageName]) {
if(imageName.indexOf(type) != -1) {
if(imageName.indexOf("Black") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Black.gif',1);
}
else if(imageName.indexOf("Blue") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Blue.gif',1);
}
else if(imageName.indexOf("Red") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Red.gif',1);
}
else if(imageName.indexOf("Yellow") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Yellow.gif',1);
}
else if(imageName.indexOf("White") != -1) {
MM_swapImage(imageName,'','images/color-buttons/White.gif',1);
}
else if(imageName.indexOf("Silver") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Silver.gif',1);
}
else if(imageName.indexOf("Pink") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Pink.gif',1);
}
else if(imageName.indexOf("Brown") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Brown.gif',1);
}
else if(imageName.indexOf("Blue-Pink") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Blue-Pink.gif',1);
}
else if(imageName.indexOf("Pink-Black") != -1) {
MM_swapImage(imageName,'','images/color-buttons/Pink-Black.gif',1);
}
pressed[imageName] = !pressed[imageName];
}
}
}
}


function doRadioSelect(objImg) {
var objRadio = document.getElementById('rd'+objImg.id);
objRadio.checked = true;
} // doRadioSelect


You can see that I've add the imageName2 in this function
"function toggleButton(color, type, imageName2, imageName) "
But I can't figure it out from here.
I would appreciate any help you could offer.