www.webdeveloper.com
Results 1 to 6 of 6

Thread: Could use a little help

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Location
    MO
    Posts
    3

    Could use a little help

    Hi. As you see, I'm a newbie in this forum, although I've found some pretty great stuff here already, so I'm sure I'll be sticking around for quite some time. Now I've been doing web-development for about 4 years, as a full-time job, and played with it for the last 12 years. So, I'm not new to the web or how it works. I specialize in Zen-Cart.

    O.k. Now that that's out of the way I'll explain my situation. I've never learned Java, and I know I need to. This looks like a great place to start. But, what I need to do is display an image based on an attribute selection from a dropdown menu.

    To explain a little more in detail:

    On a products page, the user must select a font to be used. The dropdown (attribute ID 49) is set to "5 year Old" font (option value 336) by default. I need this to display "5yrold.jpg"....which I can do. Now, the user selects the last font on the list....Wedding Text BT (option value 385), in which the image needs to change appropriately to "wed_txt.jpg" upon selection so the user can see the font they're getting. I also have a link for them to view all fonts all at once, using Java (although I can't get the image to come up full size in the new window.....it's small with a magnifying glass. Maybe somebody could tell me how to fix this, as well?), but I really need to get this done, if somebody could show me an example, or point me to the right place on this site......as this place is HUGE! and there's so many scripts for so many things.

    I would really appreciate any info on this. And if you look me up in the Zen-Cart Forums (same user Nick), you'll see that I'm not one of those "come get what I need and leave types". I'll be here for years to come, and when I learn Java......and I WILL.....I will be right here sharing what I've learned. As that's how a forum like this is supposed to be.......in MY opinion.

    Thanks,
    Robert

  2. #2
    First of all, if you're looking for Java knowledge, you're looking in the wrong place. This section is for JavaScript, which is not the same as Java.
    Java can also be used to design websites, so try to separate both.

    I assume you're talking about Javascript.
    So you're looking for a way to make the selection of a dropdown-list item display the right image.

    Here's some code to make that selection:
    HTML Code:
    <SELECT id="fontSel" onChange="changePicture(this.value);">
    In the headers, add the function:
    Code:
    function changePicture(pValue)
    {
        var vSelection = "5yrold.jpg";
        switch(pValue)
        {
            case "385": vSelection = "wed_txt.jpg";
            break;
            case ...
            //add all images here
        }
        document.getElementById("imagethathastochange").src = vSelection;
    }
    where imagethathastochange is the ID of the image you want to use.

    It'd be a lot easier if you would use the image-filenames as values for the selectionbox, though...

  3. #3
    Join Date
    Jul 2010
    Location
    MO
    Posts
    3
    Thank you Trollsplatterer......and yes, I did mean Javascript...sorry.

    I really appreciate this. I will try this and let you know how it goes.

    Now, what exactly did you mean here: "use the image-filenames as values for the selectionbox"? Change the image name from "5yrold.jpg" to........what, something "f001.jpg"?

  4. #4
    You can make the values of the selection box so that you can use this value to compose the filename directly, without writing a separate piece of code for each selection item.

    You could use the filename as value:
    HTML Code:
    <option value="wed_txt.jpg">Wedding Text BT</option>
    Code:
    function changePicture(pValue)
    {
        if(pValue != "")
            document.getElementById("imagethathastochange").src = pValue;
        else
            document.getElementById("imagethathastochange").src = "5yrold.jpg";
    }
    If all images have the same file extension, you can leave it out, like this:
    HTML Code:
    <option value="wed_txt">Wedding Text BT</option>
    Code:
    function changePicture(pValue)
    {
        if(pValue != "")
            document.getElementById("imagethathastochange").src = pValue + ".jpg";
        else
            document.getElementById("imagethathastochange").src = "5yrold.jpg";
    }

  5. #5
    Join Date
    Jul 2010
    Location
    MO
    Posts
    3

    Hey, Troll....

    You though I was gone for good, didn't you? This just got put on the back burner for a little while.
    Just letting you know that I DID get this accomplished with your help and the help of a Zen-Cart forum member. They knew ZC's files pretty good, and that always helps.

    I just wanted to drop in and say thank you so much for your help in this.

    I am off now to take my journey down javascript lane to see what I can learn and who I can meet along the way.......I hear it's a long road.

    Thanks again,
    Robert

    If anybody here wants/needs to know exactly how this is done in a Zen-Cart, I'd be happy to post the proper steps involved.
    Last edited by Get Em Fast; 09-20-2010 at 03:06 AM.

  6. #6
    Well, I'll be honest, I'm a bit too active online to keep track of who does and who doesn't react to the messages I write on forums.
    I'm glad to hear that your problem was solved, though.

    Good luck with your journey.
    It's not just a long road, it's an eternal one, because Javascript is a living thing, it evolves and so must we, developers. But once you get the hang of it, it's really just the art of combining your programming skills with the extra information you can find all over the internet.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles