Attribute Selection and JavaScript

[niccol]

Well, without going back to check I think that you are adding the image as a comment. Is that correct?

Things to remember:

You need the ID of the image to always match the getElementById statement in the javascript.

Beyond that if the images always correspond to the same number then you have no problems. So if "72" is always font4 then that is not an issue.

[Get Em Fast]

Yes, that is correct......I added the default image in the attributes' comments.

But, it looks like I YAY!ed too soon, as what works perfectly on my test site isn't working at all on another site. And I've done everything EXACTLY the same, but of course the numbers have changed.
Of course I created all my images and uploaded them.

Created a option name of: Inscription Font. In the comments added:

<img src="images/amazon.jpg" alt="select" id="img1"/>

which gave me my image of amazon.jpg on the page.

There are 11 different font selections for this product.....actually a few products.....ID's from 915-925., with 915 being the amazon.jpg

Then I redone the script from mine to look like this:

<script language="javascript" type="text/javascript"><!--
function changePicture(pValue)
{
    var vSelection = "images/amazon.jpg";
    switch(pValue)
    {
        case "925": vSelection = "images/corsiva.jpg";
        break;
        case "924": vSelection = "images/impact.jpg";
        break;
        case "923": vSelection = "images/georgia.jpg";
        break;
        case "922": vSelection = "images/fiolex.jpg";
        break;
        case "921": vSelection = "images/edwardian.jpg";
        break;
        case "920": vSelection = "images/commercial.jpg";
        break;
        case "919": vSelection = "images/clown.jpg";
        break;
    case "918": vSelection = "images/cloister_black.jpg";
        break;
    case "917": vSelection = "images/brush455.jpg";
        break;
    case "916": vSelection = "images/angelina.jpg";
        break;
        
        default:vSelection = "images/amazon.jpg";

    }
    document.getElementById("img1").src = vSelection;
}
//--></script>

Do you see anything wrong with this code?

Also, as this site isn't 'Live' to the public yet, I've pm'ed you the url.............if you wouldn't mind taking a look at it. That way, you can view the source, which to me......looks just like the source on my site, with the exception of the ID's and images being different.

Thanks........again.

[Get Em Fast]

Nick......nevermind about all the above. I had just forgot to put the code in modules/attributes.php. Once I done that, it all worked.


Now, if it would just validate...........but that's a different day......Thanks for reading all this......again.

[Get Em Fast]

I just got the validation part figured out, also. In the modules/attributes.php file I changed this:

onChange="changePicture(this.value);

to this:

onchange="changepicture(this.value);

And in the includes/modules/pages/product_info/jscript_main.php, I changed this:

function changePicture(pValue)

to this:

function changepicture(pValue)

And got a valid markup.......and it all still works! W3C says....."No Caps" in that type of script.
WooHoo! I'm a happy camper, now!
Nick, I sure do appreciate all the help, and for putting up with me.

[niccol]

Well, done. Glad it all works for you.

[azzoor]

Hi,

i have tried to implement this code and i cant seem to get the onchange to work. Wat i am trying to achieve is for when the user selects a different frame it changes the background image behind the product image. Can anyone help?

see link for test site
http://jimpicot.com/shop/index.php?m...&products_id=3

[azzoor]

Well, done. Glad it all works for you.

can you help me? i am trying to achieve the same thing.

http://jimpicot.com/shop/index.php?m...&products_id=3

[niccol]

You are not far off.

Sorry I made an error. I thought the quotes in here were wrong. But that may have been my mistake.

function swapframe(imgref) {
bgfile = 'url(<?php echo DIR_WS_IMAGES; ?>frames/' + imgref + '.jpg)';
document.getElementById("frameimage").style.backgroundImage = bgfile;
}

I would put dome alerts in the javascript to see if the values are being set correctly.

[niccol]

Jim,

Sorry I was going quickly in my previous answer and it wasn't that helpful or feindly. Try adding the url as text rather than using <?php ?> . The php won't be parsed in a .js file.

Nick

[azzoor]

Jim,

Sorry I was going quickly in my previous answer and it wasn't that helpful or feindly. Try adding the url as text rather than using <?php ?> . The php won't be parsed in a .js file.

Nick

Hi,

i have removed the php from the javascript. it still isnt working. how can i put Dom requests so that i can see the values? im noob at php/javascript