Could use a little help

@Get_Em_FastJul 13.2010

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

to post a comment

JavaScript

5 Comments(s) _↴

@TrollsplattererJul 13.2010 — #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:
[code=html]<SELECT id="fontSel" onChange="changePicture(this.value);">[/code]

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;
 }[/CODE]

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...

@Get_Em_FastauthorJul 13.2010 — #Thank you Trollsplatterer......and yes, I did mean Java[B]script[/B]...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"?

@TrollsplattererJul 14.2010 — #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:
[code=html]<option value="wed_txt.jpg">Wedding Text BT</option>[/code]

[CODE]function changePicture(pValue)
 {
 if(pValue != "")
 document.getElementById("imagethathastochange").src = pValue;
 else
 document.getElementById("imagethathastochange").src = "5yrold.jpg";
 }[/CODE]

If all images have the same file extension, you can leave it out, like this:
[code=html]<option value="wed_txt">Wedding Text BT</option>[/code]

[CODE]function changePicture(pValue)
 {
 if(pValue != "")
 document.getElementById("imagethathastochange").src = pValue + ".jpg";
 else
 document.getElementById("imagethathastochange").src = "5yrold.jpg";
 }[/CODE]

@Get_Em_FastauthorSep 20.2010 — #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.

@TrollsplattererSep 27.2010 — #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.

Also in #JavaScript _↴

[RESOLVED] Nonrefreshing Clock Pop-up windows again PLEASE HELP - Mouse-over

Success!

Help @Get_Em_Fast spread the word by sharing this article on Twitter...

Tweet This

Could use a little help

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Could use a little help

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴